ElementUI 中 Upload 组件的常用案例

1、Upload 组件简介

官网地址：https://element.eleme.cn/#/zh-CN/component/upload

1.1 HTML 内容

<el-upload
  class="upload-demo"
  drag
  action="https://jsonplaceholder.typicode.com/posts/"
  multiple>
  <i class="el-icon-upload"></i>
  <div class="el-upload__text">将文件拖到此处，或<em>点击上传</em></div>
  <div class="el-upload__tip" slot="tip">只能上传jpg/png文件，且不超过500kb</div>
</el-upload>

1.2 属性介绍

• action ：表示你要上传图片的地址，通常参数值是你的后台接口路径

固定写法

action="http://localhost:8080/upload"

灵活写法

有时候我们的项目会部署到服务器上面去，而像上面那种固定的写法
是非常不规范的，通常我们的前端 Vue 项目都会创建一些全局配置
文件，将固定不变的 IP 写好，到时候来回切换就可以了。
// 全局配置文件 IP 的配置信息
// 开发环境
Http.options.devBaseUrl: 'http://localhost:8080'
// 测试环境
Http.options.testBaseUrl: 'http://47.56.112.33:9100'
// 生产环境
Http.options.prodBaseUrl: 'http://113.223.50.97:8333'

// action 写法
:action="uploadUrl"
// 在 data 中创建一个 uploadUrl 变量
data() {
	return: {
		uploadUrl: Http.options.devBaseUrl + '/upload'
	}
}
到时候如果全局配置文件中的配置改变了，那么这些地方都会改变，
这样就不用麻烦一个个去改，能够显著提升开发效率。。。

• headers 设置上传的请求头部，一般你的后台接口需要携带 token 等才使用这个属性
• multiple 是否支持多选文件
• drag 是否启用拖拽上传
• limit 最大允许上传个数
• disabled 是否禁用

2、常用函数钩子介绍

2.1 on-success 文件上传成功时触发

html 写法

<el-upload
	:on-success="uploadSuccess">
</el-upload>

// res 表示请求响应体
uploadSuccess(res, file, filelist) {
	if (res.code == '200') {
		this.$message.success("上传成功");
	} else {
		this.$message.error("上传失败");
	}
}

2.2 on-error 文件上传失败时触发

html 写法

<el-upload
	:on-error="uploadError">
</el-upload>

// err 表示失败后的响应体
uploadError(err, file, filelist) {
	this.$message.error("上传失败");
}

2.3 on-remove 移除文件时触发

html 写法

<el-upload
	:on-remove="removeChange">
</el-upload>

// file 就是你要移除的文件信息
removeChange(file, fileList) {
	console.log("你要移除的文件为", file.name);
}

2.4 before-upload 上传文件前执行的函数

html写法

<el-upload
	:before-upload="beforeUpload">
</el-upload>

上传文件之前的钩子，参数就是你要上传的文件，如果返回 false 或者返回 Promise 且被 reject，则停止上传文件

beforeUpload(file) {
	
}

2.5 before-remove 删除文件之前执行的函数

html 写法

<el-upload
	:before-remove="beforeRemove">
</el-upload>

删除文件之前的钩子，参数就是你已经上传的文件和文件列表，如果返回 false 或者返回 Promise 且被 reject，则停止删除

beforeRemove(file, fileList) {

}

3、Upload 组件上传图片时携带 token 写法

通过 headers 属性来实现携带 token

		<el-upload
            class="upload-demo"
            drag
            :limit="1"
            action="http://localhost:8080/upload"
            :headers="headers"
            :on-remove="removeChange"
            :on-success="uploadSuccess"
            :on-error="uploadError">
            <i class="el-icon-upload"></i>
            <div class="el-upload__text">将文件拖到此处，或<em>点击上传</em></div>
          </el-upload>

在 Vue 里面通过 computed 来监听 headers

computed: {
	headers() {
		return {
			"Authorization": window.localStorage.getItem('Admin-Token');	// 你是怎么存的 token，怎么取 token 就行
		}
	}
}

4、Element 文件上传后回显图片预览

4.1 通过 on-success 函数钩子实现图片回显

在上传文件成功后，通过后台返回给前端一个图片地址，拿到这个图片地址

		<el-upload
            class="upload-demo"
            drag
            :limit="1"
            :action="http://locahost:8080/upload"
            :on-remove="removeChange"
            :on-success="uploadSuccess"
            :on-error="uploadError">
            <img v-if="licenseImageUrl" :src="licenseImageUrl" alt="" width="350px"
                 height="170px">
            <i class="el-icon-upload"></i>
            <div class="el-upload__text">将文件拖到此处，或<em>点击上传</em></div>
            <div class="el-upload__tip" slot="tip"><span style="font-size: 16px;">点击上传营业执照</span></div>
          </el-upload>

这里举例 res.url 就是后台返给前端的图片路径
将上传的图片路径返给 this.licenseImageUrl 变量
最后页面上的 img 标签的 src 属性直接使用 this.licenseImageUrl 变量回显图片即可
需要注意图片的宽高问题

data() {
	return {
		// 要回显的图片
		licenseImageUrl: '',
	}
},
// 图片上传成功后的回调函数
uploadSuccess(res, file, filelist) {
	let _this = this;
	_this.licenseImageUrl = res.url;
}

4.2 通过 on-remove 函数钩子移除图片

removeChange(file){
	// 直接将 this.licenseImageUrl 设置为空即可
	this.licenseImageUrl = '';
}

4.3 效果展示