vue七牛云上传图片
1.安装七牛云
npm安装
npm install qiniu-js
yarn安装
yarn add qiniu-js
在单个页面引入
import * as qiniu from "qiniu-js";
<van-uploader :after-read="afterRead" :before-delete="beforeDelete" :max-count="1" v-model="fileList"style="position: relative;"><div style="position: relative; width: 86px;height: 86px;"><img src="../img/uploader.png" alt=""><div class="slogo">上传logo</div></div></van-uploader> //上传文件 判断是否为.png-.jpg .gif .jpegafterRead(files) {// 此时可以自行将文件上传至服务器const indexOfSuffix = files.file.name.lastIndexOf(".");const suffix = indexOfSuffix >= 0 ? files.file.name.substr(indexOfSuffix) : "";if (suffix === '.png' || suffix === '.jpg' || suffix === '.gif' || suffix === '.jpeg') {this.uploadFile(files.file);} else {Toast('暂不支持该图片格式');}},//上传图片 首先调取接口获取七牛云的tokenuploadFile(file) {const indexOfSuffix = file.name.lastIndexOf("."); //后缀名const suffix = indexOfSuffix >= 0 ? file.name.substr(indexOfSuffix) : "";const filename = "op_" + moment().unix() + suffix; // 时间戳+后缀名const key = this.pre + filenameif (file) {this.axios.get('apply/guild/getUploadToken').then(res => {if (res.data.Code === '8000') {const putExtra = { fname: "", params: {}, git: null };const config = { useCdnDomain: true, region: qiniu["region"].as0 };let observable = qiniu["upload"](file, //要上传的文件对象。key, //上传到七牛云后的文件名或路径(也就是图片的后缀)。res.data.Result.UploadToken, //从服务器获取的七牛云上传凭证。putExtra, //额外的设置参数，包括文件名、自定义参数和自定义变量。config //配置参数，设置是否使用CDN加速和所选的七牛云存储区域。);observable.subscribe({next: ((response) => {if (response.total.percent >= 100) {Toast('上传成功');}}),error: ((err) => {Toast('上传失败,请稍微再试');}),complete: ((response) => {const key = response.key; // 获取七牛云返回的 key// 在这里可以进行后续操作，如保存 key 到数据库等this.from.LogoImg = key})})}})}}