element-ui文件上传el-upload

//其中action是上传的地址；
//on-remove是文件列表移除文件时的钩子；
//before-upload是上传文件之前的钩子，参数为上传的文件，若返回 false 或者返回 Promise 且被 reject，则停止上传；
//on-success是文件上传成功时的钩子；
//file-list是上传的文件列表
<el-upload
	class="upload-demo"
	ref="upload"
	:action="userImageAction()"
	:on-remove="handleRemove"
	:before-upload="onBeforeUpload"
	:on-success="successFile"
	:with-credentials="true"
	:file-list="fileList"
	list-type="picture">
	<el-button size="small" type="primary">选取图片</el-button>
	<div slot="tip" class="el-upload__tip">支持上传一个jpg/png/jpeg/bmp/gif/webp文件</div>
</el-upload>

export default {
	data(){
		return {
			fileList:[],
			//这是点击添加后要传给后端接口的数据
			productTemp:{
				img:'',
				id:''
			}
		}
	},
	methods:{
		userImageAction() {
			return 'http://127.0.0.1:900/data/fileUpload'
		},
		handleRemove(file,fileList){
			this.fileList=fileList;
		},
		onBeforeUpload(file) {
	      const isImage = file.type === 'image/jpg' || file.type === 'image/png' ||
	          file.type === 'image/jpeg' || file.type === 'image/bmp' ||
	          file.type === 'image/gif' || file.type === 'image/webp'
	      if (!isImage) {
	        this.$message.error('上传图片只能是jpg/png/jpeg/bmp/gif/webp格式!')
	      }
	      const isLt2M = file.size / 1024 / 1024 < 2
	      if (!isLt2M) {
	        this.$message.error('上传头像图片大小不能超过 2MB!')
	      }
	      return isLt2M && isImage
	   },
	   successFile(response, file) {
	      if (response.code === 0) {
	        this.fileList = [file];
	        this.productTemp.img =  'http://127.0.0.1:900/' + response.data;
	      } else {
	        this.$message.error(response.message)
	      }
    	},
	}
}

例子：

<template>
  <div>
    <div>{{productTemp.name}}</div>
    <div>{{productTemp.img}}</div>
    <el-button @click="add">添加</el-button>
    <el-dialog width="35%" :close-on-click-modal="false"
                 :visible.sync="dialogFormVisible">
        <el-form ref="ruleForm" :model="productTemp">
          <el-form-item label="手机名称" prop="name">
            <el-input v-model="productTemp.name" clearable></el-input>
          </el-form-item>
          <el-form-item label="产品图">
            <el-upload
                class="upload-demo"
                ref="upload"
                :action="userImageAction()"
                :on-remove="handleRemove"
                :before-upload="onBeforeUpload"
                :on-success="successFile"
                :with-credentials="true"
                :file-list="fileList"
                list-type="picture">
              <el-button size="small" type="primary">选取图片</el-button>
              <div slot="tip" class="el-upload__tip">支持上传一个jpg/png/jpeg/bmp/gif/webp文件</div>
            </el-upload>
          </el-form-item>
        </el-form>
        <div slot="footer" class="dialog-footer">
          <el-button size="small" @click="cancel">取 消</el-button>
          <el-button size="small" type="primary" @click="confirmAdd">确 定
          </el-button>
        </div>
      </el-dialog>
  </div>
</template>

<script>
export default {
  data(){
    return {
      dialogFormVisible: false,
      fileList:[],
			//这是点击添加后要传给后端接口的数据
			productTemp:{
				img:'',
				name:''
			}
    }
  },
  methods:{
    //点击添加按钮后弹出添加弹框
    add(){
      this.dialogFormVisible=true;
    },
    //点击取消按钮后隐藏弹框
    cancel(){
      this.dialogFormVisible=false;
    },
    //点击确认按钮后是需要将数据传给后端进行添加数据的，但是这里我没有接口所以就没传
    confirmAdd(){
      this.dialogFormVisible=false;
      console.log(this.productTemp);
    },
	userImageAction() {
		return 'http://127.0.0.1:900/data/fileUpload'
	},
	handleRemove(file,fileList){
		this.fileList=fileList;
	},
	onBeforeUpload(file) {
	     const isImage = file.type === 'image/jpg' || file.type === 'image/png' ||
	          file.type === 'image/jpeg' || file.type === 'image/bmp' ||
	          file.type === 'image/gif' || file.type === 'image/webp'
	      if (!isImage) {
	        this.$message.error('上传图片只能是jpg/png/jpeg/bmp/gif/webp格式!')
	      }
	      const isLt2M = file.size / 1024 / 1024 < 2
	      if (!isLt2M) {
	        this.$message.error('上传头像图片大小不能超过 2MB!')
	      }
	      return isLt2M && isImage
	},
	successFile(response, file) {
	      if (response.code === 0) {
	        this.fileList = [file];
	        this.productTemp.img =  'http://127.0.0.1:900/' + response.data;
	      } else {
	        this.$message.error(response.message)
	      }
   		},
	}
}
</script>

<style scoped>

 
</style>