elementUI点上传图片时先走个其他接口再上传图片
需求是点击上传头像时先走一个获取账号的接口,然后再走上传图片接口,
<el-upload class="avatar-uploader" :action="fileUploadPath" :data="uploadParam" :before-upload="beforeUpload" :http-request="uploadSectionFile" :on-success="uploadSuccess1" :on-error="uploadError" :limit="1" :show-file-list="false" :file-list="fileList"> <img v-if="imageUrl" :src="imageUrl" class="avatar"> <span v-else class="icon">上传图片</span> </el-upload>
import Vue from 'vue'; import axios from 'axios' export default { data() { return { //回显图片url imageUrl: '', // 上传图片相关参数 fileUploadPath: '', // 上传图片路径 fileList: [], // 上传文件列表 //临时存储的kf_account kf_account: '', } }, created() { this.fileUploadPath = 上传图片的接口; }, methods: { uploadSectionFile(param) { this.api.knowledgeBase.addKfAccount().then(res => { if (res.status === 200) { var fileObj = param.file; var form = new FormData(); form.append("file", fileObj); form.append( "kf_account":"${res.result.kf_account}"); axios({ method: 'post', url: this.fileUploadPath, headers: { 'Content-Type': 'multipart/form-data' }, data: form }).then(res => { //上传图片接口返回 }) } else { this.$notify({ title: '请求失败', message: res.message, type: 'error' }); } }).catch((error) => {}) }, }
不完整代码,仅供参考。
浙公网安备 33010602011771号