Open mengjoy opened 4 years ago
1、需求描述
有一个表单，表单中需要插入图片
图片上传的过程：先上传到七牛云上，将七牛云返回的key值，提交给服务端的是这个key值
2、七牛云上传
3、使用的组件
4、过程 既然使用http-request干掉了本身的提交功能，那么需要将auto-upload这个属性置为false，before-upload应该是不能用了，所以使用on-change这个事件去监听文件的变化，当on-change变化的时候去请求后段的接口获取token，因为上传到七牛云的时候需三个必须的必须的参数（file，key，token）,key和token都是后端返回的，file是on-change事件的一个默认参数，这三个三处都有了的时候，需要手动提交，才能上传，手动提交使用了submit() ,当submit提交之后才能执行http-request定义的方法。 http-request绑定的事件方法里面主要是处理了上传七牛云的请求，这里需要注意上传非json数据的时候需要将'Content-Type':字段设置成'multipart/form-data'，以及提交七牛云所需要的数据的时候，使用formData格式上传的，这里需要先new FormData() ,使用append('key',value)这个方法将所需要的参数添加，完成之后，发送请求，七牛云会返回一个key，将baseurl+key就是图片的链接。
5、遇到问题
上传的时候data数据格式必须是formData let formData = new FormData() let config= { 'Content-Type': 'multipart/form-data' } formData.append('file', req.file) formData.append('key', this.data['key']) formData.append('token', this.data['upload_token'])
let formData = new FormData() let config= { 'Content-Type': 'multipart/form-data' } formData.append('file', req.file) formData.append('key', this.data['key']) formData.append('token', this.data['upload_token'])
文档中:这个不需要bucket,上传的时候只要key
文档写的不是很清晰⚠️ `
` 这里的是token，和key字段，但是文档中的参数介绍里面写的是resource_key 和upload_token，注意参数
需要安装七牛云的包 npm install qiniu-js
npm install qiniu-js
七牛上传时候七牛的url不同地区是不一样，需要 找自己所在的地区，华北华东什么的。
6、代码粘贴
<template v-for="(prove,index) in form.proves"> <el-upload ref="uploadProve" action="http://upload.qiniup.com/" :auto-upload="false" list-type="picture-card" :show-file-list="false" :on-change="(file,fileList) => changeUpload(file, fileList, 'uploadProve',index)" :http-request="(req) => uploadImageQiNiu(req,index,'proof_file')" class="avatar-uploader"> <img v-if="prove['proof_file']" :src="prove['proof_file']" class="avatar"> <i v-else class="el-icon-plus avatar-uploader-icon"></i> </el-upload> </template> changeUpload(file,refs,index) { axios.get(http://获取token的url)).then((res)=>{ this.data['upload_token'] = res.data.data.token this.data['key'] = res.data.data.key this.$refs[refs][index].submit() }).catch((err) => { this.$message.error({ message: err.message }) }).finally(() => { this.$refs[refs][index].clearFiles() }) }, uploadImageQiNiu(req, index, imgName) { let formData = new FormData() let config= { 'Content-Type': 'multipart/form-data' } formData.append('file', req.file) formData.append('key', this.data['key']) formData.append('token', this.data['upload_token']) axios.post('https://upload-z1.qiniup.com/', formData, config) .then((res) => { let imgUrl = `https://baseurl/${res.data.key}` this.form.proves[index][imgName] = imgUrl }) },
------------------------··································-bug补充··································································--------- 昨晚发现，如果我上传多次的话，在uploadImageQiNiu中会把所有的change过的file全部上传，但是不能限制limit，所以采用了在每次获取到token的之后就将fileList清除掉，这样只会上传 成功获取tokende文件。
1、需求描述
有一个表单，表单中需要插入图片
图片上传的过程：先上传到七牛云上，将七牛云返回的key值，提交给服务端的是这个key值
2、七牛云上传
3、使用的组件
4、过程 既然使用http-request干掉了本身的提交功能，那么需要将auto-upload这个属性置为false，before-upload应该是不能用了，所以使用on-change这个事件去监听文件的变化，当on-change变化的时候去请求后段的接口获取token，因为上传到七牛云的时候需三个必须的必须的参数（file，key，token）,key和token都是后端返回的，file是on-change事件的一个默认参数，这三个三处都有了的时候，需要手动提交，才能上传，手动提交使用了submit() ,当submit提交之后才能执行http-request定义的方法。 http-request绑定的事件方法里面主要是处理了上传七牛云的请求，这里需要注意上传非json数据的时候需要将'Content-Type':字段设置成'multipart/form-data'，以及提交七牛云所需要的数据的时候，使用formData格式上传的，这里需要先new FormData() ,使用append('key',value)这个方法将所需要的参数添加，完成之后，发送请求，七牛云会返回一个key，将baseurl+key就是图片的链接。
5、遇到问题
上传的时候data数据格式必须是formData
let formData = new FormData() let config= { 'Content-Type': 'multipart/form-data' } formData.append('file', req.file) formData.append('key', this.data['key']) formData.append('token', this.data['upload_token'])文档中:这个不需要bucket,上传的时候只要key
文档写的不是很清晰⚠️ `
` 这里的是token，和key字段，但是文档中的参数介绍里面写的是resource_key 和upload_token，注意参数
需要安装七牛云的包
npm install qiniu-js七牛上传时候七牛的url不同地区是不一样，需要 找自己所在的地区，华北华东什么的。
6、代码粘贴
------------------------··································-bug补充··································································--------- 昨晚发现，如果我上传多次的话，在uploadImageQiNiu中会把所有的change过的file全部上传，但是不能限制limit，所以采用了在每次获取到token的之后就将fileList清除掉，这样只会上传 成功获取tokende文件。