vue 项目利用element el-upload图片自定义上传到七牛云

以前写的,想起来了就写一下,七牛云没有批量上传的接口和方法

 <el-upload
      :class="{hide:ishide}"//控制上传按钮是否隐藏,css配合一下
      ref="upload"
     list-type="picture-card"
     :auto-upload="false"//不自动上传
     :on-change="changeUpload"
     :on-remove="handleRemove"
     :file-list="fileList"
   >
     <i class="el-icon-plus"></i>
 </el-upload>
 <el-button type="primary" @click="submitUpload">确定上传</el-button>
data(){
	return {
		ishide:false,
		fileList:[],
	}
},
methods: {
	submitUpload(){
		this.$refs["ruleForm"].validate(async  valid=>{//我是跟表单一块上传的,不需要的话验证可以去掉
			let imgU = await this.uploadImg(this.fileList);//拿到七牛云返回的地址数组
		})
	},
	 changeUpload(file, fileList) {
      if (file.raw.type == "image/jpeg" || file.raw.type == "image/png") {
        this.changeFlag = true;
        this.fileList = fileList;
        this.ishide = fileList.length >= 1;
        return true;
      } else {
        this.$message.error("上传标题图片只能是 JPG或PNG 格式!");
        fileList.splice(0, 1);
        return false;
      }
    },
     getToken() {
         return new Promise((resolve, reject) => {
             let bucket = "XXX";//七牛云空间名称
             axios({
                 url: "XXX",//后端接口获取token
                 method: "get",
                 params: {
                     bucket: bucket
                 }
             }).then(res => {
                 if (res.data.code == 1000) {
                     resolve(res.data.data);
                 } else {
                     this.$message.error("token获取失败,请联系管理员");
                 }
             });
         });
     },
     uploadImg(file) {
         // 七牛云上传配置
         const config = {
             useCdnDomain: true,
             region: qiniu.region.z2
         };
         let fileList = []
         return new Promise(async (resolve, reject) => {
             let bucket = 'http://XXX.com/'//上传的七牛云空间外链域名地址
             let observer = {
                 // 上传进度
                 next(res) {},
                 // 上传失败
                 error(err) {
                     resolve({
                         code: 1002,
                         msg: "图片上传失败...."
                     });
                 },
                 // 上传成功
                 complete: res => {
                     fileList.push(`${bucket}${res.key}`)
                     if (fileList.length == file.length) {//考虑多图片上传
                         resolve(fileList);
                     }
                 }
             };
             let token = await this.getToken();
             let observable;
             file.forEach(val => {//考虑多图片上传和多图编辑的情况
                 if (val.raw) {
                     observable = qiniu.upload(
                         val.raw,
                         `${new Date().getTime()}_${val.name}`,//文件名称,为了避免名称重复,加了时间戳
                         token,
                         config
                     );
                     observable.subscribe(observer);
                 } else {
                     fileList.push(val.url);
                     if (fileList.length == file.length) {
                         resolve(fileList);
                     }
                 }

             })
         });
     },
 }

如果用axios上传七牛云,需要注意一下地址

const axiosInstance = axios.create({ withCredentials: false });//上传七牛云不能加token,会跨域
axiosInstance({
  url: "https://upload.qiniup.com/",//这个是华东地区地址,不是那个外链地址
    method: "POST",
    data: {
    	token:'',//后端获取的token
    	file:'',
    	key:'',//文件名称,不写的话就是默认的
    },
  }).then((res) => {
    console.log(`http://XXX.com/${res.data.key}`);//前面加的是七牛云的外链地址
  });

在这里插入图片描述

Vue 中使用七牛云进行图片上传,需要先在七牛云申请一个空间并获取 Access Key 和 Secret Key,然后安装相关的依赖库。 1. 安装依赖库: ``` npm install qiniu-js vue-qiniu-upload --save ``` 2. 在 Vue 中引入依赖: ``` import QiniuUpload from 'vue-qiniu-upload' import * as qiniu from 'qiniu-js' ``` 3. 在 Vue 组件中使用: ``` <template> <div> <qiniu-upload :domain="domain" :access-key="accessKey" :secret-key="secretKey" :path="path" :size="size" :accept="accept" :before="beforeUpload" :complete="uploadComplete" :error="uploadError" > <button>上传图片</button> </qiniu-upload> </div> </template> <script> export default { components: { QiniuUpload }, data () { return { domain: 'your-qiniu-domain', accessKey: 'your-access-key', secretKey: 'your-secret-key', path: '/upload', size: 10 * 1024 * 1024, accept: 'image/*' } }, methods: { beforeUpload (file) { // 可以在这里进行一些上传前的操作,比如图片压缩等 }, uploadComplete (res) { // 上传完成后的回调 console.log('上传完成', res) }, uploadError (err) { // 上传失败的回调 console.log('上传失败', err) } } } </script> ``` 以上代码中,`QiniuUpload` 组件是我们刚才引入的依赖库中提供的,通过传入相关参数就可以进行图片上传了。在 `beforeUpload` 方法中可以对图片进行一些处理,比如压缩等操作。`uploadComplete` 和 `uploadError` 分别是上传成功和上传失败后的回调函数,可以进行一些相关的操作。 注意,上传图片之前需要在七牛云中进行配置,具体可以参考七牛云的文档。
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值