目录

1.背景

2.环境

3.问题集

1）文件上传完成后，文件名的回显

2）文件上传完成前的加载状态

3）文件上传作为必填项

1.背景

在使用Vue+ElementUI进行前端工程开发中，遇到一些文件上传的问题，包括上传、回显、等待等。这里做一些记录，方便以后查看

2.环境

3.问题集

1）文件上传完成后，文件名的回显

关键属性el-upload中 :file-list, :show-file-list

详细代码请往后看~~

参考：

https://www.jb51.net/article/183328.htm

vue+elementUI上传图片/文件，编辑时回显文件名_LBJSagiri的博客-CSDN博客

elementUI上传图片回显在编辑 - 写手在作画 - 博客园

根据elementui中的上传组件upload，手写一个编辑时回显上传文件以及继续新增文件的功能 - 简书

 element-ui Upload 上传文件再编辑显示的两种方式_liaoxuewu的博客-CSDN博客

2）文件上传完成前的加载状态

关键属性v-loading和el-upload中：on-progress。

详细代码请往后看~~

参考：

 vue自定义指令v-loading_伴个人993的博客-CSDN博客

【转】Vue v-loading实现加载效果 - 花影疏帘 - 博客园

vue+element-ui中上传文件使用Progress自定义实时更新进度条 - 简书

vue element-ui 上传文件的 :on-progress钩子无法触发的原因及报错原因 - 嘉煠 - 博客园

3）文件上传作为必填项

关键属性 el-form中定义prop和:rules。上传后，必填提示清除

详细代码请往后看~~

参考：

【vue】vue表单必填项前面添加红色*_小朋友的博客-CSDN博客

vue上传文件,文件是必填项的验证 - 吃的快不吐骨头 - 博客园

<template>
  <div v-loading="loading" ref="fileUpload">
	<el-form-item label="文件上传" ref="fileUpload" prop="filepath" :rules="rules.file">	// 必填项以及规则
	   <el-upload
		 v-model="item.filepath"
		 :on-success="handleFileSuccess"
		 :on-remove="handleFileRemove"
		 :before-remove="beforeFileRemove"
		 :on-exceed="handleUploadExceed"
		 :file-list="fileList"            // 文件列表
		 :show-file-list="isShow"        // 文件回显标记
		 :action="'/myService/file/upload'"
		 :limit="1"
		 class="upload-demo"
	   >
		 <el-button size="small" type="primary">上传文件</el-button>
		 <el-tooltip placement="right-end">
		   <div slot="content">只能上传txt文件，且不超过2MB</div>
		   <i class="el-icon-question" />
		 </el-tooltip>
	   </el-upload>
	</el-form-item>
  </div>
</template>

export default {
	data() {
		return {
			loading: false,
			item: {
				filepath: "",
			},
			
			// 必填项规则
			rules: [
				file: {required: true, message:"文件必须上传", trigger: "change"}
			]
		}
	
	},
	handleFileSuccess(response) {
	  this.item.filepath = response.data.items.filepath;		// 后端返回的对象key为items，其中文件链接存放在变量filepath中
	  if (this.item.filepath != null) {
		this.isShow = true;
		this.$message({
		  showClose: true,
		  message: "上传成功!",
		  type: "success",
		});
		(this.rules.file = []), this.$refs.fileUpload.clearValidate();		// 动态删除文件上传必填的提示信息
	  } else {
		this.isShow = false;
		this.fileList = [];
		this.$message({
		  showClose: true,
		  message: "上传失败!",
		  type: "error",
		});
	  }
	  this.loading = false;				// 上传完成后loading状态清楚
	},
	handleUploadExceed() {
	  this.$message.warning("想要重新上传文件，请先删除已上传的文件");
	},
	beforeFileRemove(file, fileList) {
	  return this.$confirm(`确定删除 ${file.name}`);
	},
	handleFileRemove() {
	  this.item.filepath = "";		// 删除文件时清空文件地址
	},
}

注

文件上传content-type：multipart/form-data

Vue端

多文件上传

let files = new FormData()
for (let i in this.fileList) {
    files.append('files', this.fileList[i].raw)
}

下载

window.open(this.BASE_URL + '/download/' + id)

Controller层

上传

    @RequestMapping("/uplaod")
    @ResponseBody
    public RespBean add(@RequestParam("file") MultipartFile file) {
    //TODO 处理上传的数据
    String fileName = file.getOriginalFilename();
    String contentType = file.getContentType();
    long size = file.getSize();
    
    }

下载

    @GetMapping("/download/{id}")
    @ResponseBody
    public void show(@PathVariable("id") String id, HttpServletResponse response) {
        //TODO 获取需要下载的数据
        String contentType = null;
        String fileName = null;
        byte[] data = null;
        
        try {
            response.setCharacterEncoding("UTF-8");
            response.setHeader("content-type", contentType + "; charset=utf-8");
            response.setContentType(contentType + ";charset=utf-8");
            response.setHeader("Content-Disposition", "attachment; filename=" + java.net.URLEncoder.encode(fileName, "UTF-8"));
            response.getOutputStream().write(data);
            response.getOutputStream().flush();
            response.getOutputStream().close();
        } catch (Exception e) {
            e.printStackTrace();
        }
    }

附

获取resources目录下文件，部署可用。

@Autowired
ResourceLoader resourceLoader;

File file = resourceLoader.getResource("classpath:apk/ai.apk").getFile();

常见content-type

.apk：application/vnd.android.package-archive
.jpg：image/jpeg
.zip：application/zip
.docx：application/vnd.openxmlformats-officedocument.wordprocessingml.document
.mp4：video/mp4
.pdf：application/pdf

input[type=“file”]上传文件原理详解https://blog.csdn.net/weixin_42193004/article/details/96275626

formData:https://developer.mozilla.org/zh-CN/docs/Web/API/FormData/Using_FormData_Objects

结果：

代码：

<div>
                  <span>上传文件：</span>
                  <a class="upload" id="up_btn">
                    <input type="file" @change="uploadFile()" class="change" id="file1" />
                    选择文件
                  </a>

                  <a
                    :href="this.config.hostfile + file1.FilePath"
                    :download="file1.SysFileName"
                    target="_blank"
                    class="file2"
                  >{{file1.OriginName}}</a>
                </div>


import axios from "axios";
data() {
    return {
      file1: {
        name: "",
        url: "",
        download: "",
      }
      }
      }
methods：{
 uploadFile() {
      let f = document.getElementById("file1");
      if (f.files) {
        let fileList = f.files;
        let formData = new FormData();  //创建空对象
        for (let i = 0; i < fileList.length; i++) {
          //如需判断文件就在这判断 现在不判断
          formData.append("film", fileList[i]);
        }
        axios
          .post(文件上传接口, formData)
          .then((res) => {
            if (res.data.Success) {
              this.file1 = res.data.Result;
            } else {
              this.$message.error(res.Msg || "获取数据失败，无法上传");
            }
          })
          .catch((err) => {
            console.log(err);
            this.$message.error("无法上传");
          });
      }
    }
}

.upload {
  padding: 4px 10px;
  height: 20px;
  background-color: #00b3ee;
  color: #fff;
  position: relative;
}
.change {
  position: absolute;
  top: 0;
  left: 0px;
  overflow: hidden;
  opacity: 0;
  width: 76px;
  height: 24px;
}
.file2{
  padding-left: 10px;
}