今日修改bug时,上传组件点击上传,上传成功后,再次点击上传,没有反应,二次上传时http-request的方法没有进入。
原因是:第一次上传文件后,浏览器还保存着我们已经上传的文件,所以要想继续上传文件,就需要在on-success钩子函数中通过ref 拿到它的document元素进行清除已经上传的文件,来看看代码吧
<div> <el-upload ref="fileUploadBtn" class="upload-div right-btn-list-num" action :limit="1" :show-file-list="false" :file-list="fileList" :on-success="handleSuccess" :http-request="uploadFile" > <el-button size="mini" type="default" :loading="isUploading">重新上传</el-button> </el-upload> </div> handleSuccess(res, file) { this.$refs.fileUploadBtn.clearFiles(); //上传成功之后清除历史记录 }, // 单个图片保存 async uploadFile(item) { console.log(item, 1111); const { v4: uuidv4 } = require('uuid'); this.isUploading = true; let { status, message, content } = await fileRuleGet(this.navbarUnit.navbarUnitId); if (status) { //1 获取扩展名 let fileArr = item.file.name.split('.'); let extra = fileArr[fileArr.length - 1]; //2.获取上传参数 const { bucketName, path } = content; // 3.拼接参数 let params = new FormData(); params.append('file', item.file); params.append('path', `${path}${uuidv4()}.${extra}`); params.append('bucketName', bucketName); params.append('unitId', this.navbarUnit.navbarUnitId); // 4.push上传 fileUploadApi(params).then(res => { this.onHandleSucces([res], item.file); }); } else { onError(message); } this.isUploading = false; }, onHandleSucces(resArr, file) { // let arr = [] resArr.map((res, index) => { console.log(file.name); let fileArr = file.name.split('.'); console.log(fileArr); let extra = fileArr.pop(); console.log(extra); let fileSize = (file.size / 1024).toFixed(0); const fileObj = { file_name: fileArr.join('.'), //文件名称 file_size: fileSize, //文件大小 file_format: extra, //文件名后缀 file_suffix: extra, file_path: `${res.content.bucketName}/${res.content.path}`, store_id: res.content.storeId }; this.detailsruleForm.file_name = file.name; this.detailsruleForm.file_size = fileObj.file_size; this.detailsruleForm.file_format = fileObj.file_format; this.detailsruleForm.file_suffix = fileObj.file_suffix; this.detailsruleForm.file_path = fileObj.file_path; this.detailsruleForm.store_id = fileObj.store_id; }); this.isUploading = false; },
版权归原作者 七拾一 所有, 如有侵权,请联系我们删除。