赞
踩
今日修改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;
- },
Copyright © 2003-2013 www.wpsshop.cn 版权所有,并保留所有权利。