el-upload 文件上传

html:

<el-upload
   drag
   :action="uploadUrl"
   :headers="uploadHeader"
   :file-list="docList"
   name="files"
   :data="uploadData"
   :limit="1"
   :on-success="uploadSuccess"
   :before-upload="beforeUpload"
   :on-remove="handleRemove"
   style="width: 360px"	
>
  <i class="el-icon-upload"></i>
  <div class="el-upload__text">
    将文件拖到此处，或<em>点击上传</em>
  </div>
  <div class="el-upload__tip" slot="tip">
    如有多个文件请使用压缩工具打包成一个文件上传
    （不支持.wps文件上传）
  </div>
</el-upload>

js:

data(){
	return {
		uploadUrl: window.SITE_CONFIG.baseUrl + "/general/fileUpload",
	    uploadHeader: {},
	    uploadData: { type: 2, region: 1 },
	    docList: [],
	}
}

methods: {
	// 上传成功
	uploadSuccess(res) {
	    this.docList = [
	        {
	          name: res.data[0].name,
	          url: res.data[0].url,
	        },
	    ];
	    this.dialogForm.attachUrl = [
	        {
	          name: res.data[0].name,
	          url: res.data[0].url,
	        },
	    ];
    },
    // 移除文件
    handleRemove(file, fileList) {
	    this.docList = fileList.map((item) => {
	        let temp = {};
	        temp.name = item.name;
	        temp.url = item.url;
	        return temp;
	    });
	    this.dialogForm.attachUrl = this.docList;
    },
    // 上传之前对文件大小、类型做限制
    beforeUpload(file) {
	    const isImg = ["image/jpeg", "image/png"].indexOf(file.type) !== -1;
	    const isLt5M = file.size / 1024 / 1024 < 5;
	    if (!isImg) {
	      this.$message.error("上传图片只能是 JPG 或 PNG 格式!");
	    }
	    if (!isLt5M) {
	      this.$message.error("上传图片大小不能超过 5MB!");
	    }
	    return isImg && isLt5M;
    },
}

限制上传的文件类型，也可以直接使用accept属性，例如：

<el-upload accept=".doc,.docx,.jpg,.png,.pdf,.zip,.rar"></el-upload>