vue+element-ui Upload 上传实现自定义上传图片

目录

原来：

原因：

实现：

一、template部分

二、js部分

---

原来：

在element ui中Upload 上传是通过action填写的api，选择图片后自动发起上传请求的。

原因：

1、在开发中其实根本用不到action，api都是放在统一文件下管理的，并且有些上传请求是需要做一些请求前的处理的，比如携带token之类的，设置请求头之类的。

2、在实际开发中，很少自动上传的，基本上都是选择图片或文件后，在点击提交才发起上传请求的。

实现：

1、自定义上传方法体（api做到统一管理），

2、选择图片(此时可看的预览图)，点击确定后才发起上传请求。

一、template部分

1、action的提交地址填空即可，这个是必写属性，删除是会报错的；

2、show-file-list  是否显示已上传文件列表；

3、multiple  是否支持多选文件；

4、http-request="importFile"  覆盖默认的（action）上传行为，自定义上传的实现；

5、on-change="onChange"  文件状态改变时的钩子，添加文件、上传成功和上传失败时都会被调用，在这里我们可以做一些上传前的文件类型或大小的限制；

6、accept 接受上传的文件类型（thumbnail-mode 模式下此参数无效）

7、dataFormSubmit() 这个是确定发起请求的请求方法，在js部分会发出来；

<el-upload 
class="avatar-uploader" 
action="" 
ref="upload" 
:show-file-list="false"
list-type="picture" 
:multiple="false" 
:http-request="importFile" 
:on-change="onChange" 
accept=".jpg,.jpeg,.png,gif,JPG,JPEG,PNG,GIF">
	<img v-if="imageUrl" :src="imageUrl" class="avatar">
	<i v-else class="el-icon-plus avatar-uploader-icon"></i>
</el-upload>
<el-button size="mini" type="primary" @click="dataFormSubmit()">确 定</el-button>

二、js部分

            //选择文件时触发
           onChange(file) {
				this.imageUrl = URL.createObjectURL(file.raw);
				// 这里做一些文件控制，注意：就算一次选取多个文件，这里依旧会执行多次
				let typeArray = ['image/jpg', 'image/jpeg', 'image/png', 'image/gif']
				let isJPG = typeArray.indexOf(file.raw.type)
				if (isJPG === -1) {
					this.$message.error('上传头像图片只能是 jpg、jpeg、png或gif 格式！！！')
				}
				this.fileList = file;
				// console.log(file)
			},
            //自定义的上传方法用于覆盖自带的action上传，在这里我们只拿到要上传的文件，不提交
			importFile() {
				this.formData = new FormData()
				this.formData.append('file', this.fileList.raw, 'yingji')
			},
            //点击确定发起的提交
			dataFormSubmit(id) {
				if (this.fileList!=null) {
                    //PostYingji api统一文件中封装好的请求
					PostYingji(this.formData).then(data => {
						// console.log(data)
						if (data && data.status === 200) {
							this.$message({
								message: '上传文件成功',
								type: 'success',
								duration: 1500,
								onClose: () => {
									this.fileList = null
								}
							})
							// console.log(data.data.data.yingji)
							this.ruleForm.logoUrl = data.data.data.yingji;
							this.fileList = null;
							if (id == 1) {
								this.updateBeOnDuty();
							} else {
								this.AddBeOnDuty()
							}
						} else {
							this.$message.error(data.data.msg)
						}
					}).catch((err) => {
						console.log(err)
						this.$message.error('上传文件异常')
					})
				} else {
					this.$message.error('请先选取上传文件')
				}
			},

封装好的api

export function PostYingji(data = {}) {
  return service({
    url: '/api-minio-file/file/fileUpload/dan/yingji',
    method: 'post',
    headers: {
      'Content-Type': 'multipart/form-data', //设置请求头请求格式form
    },
    data,
  });
}

注意：这里的api封装是根据你们自己封装的axios来配置