VUE实现上传图片

1、HTML部分

<el-col :span="24">
    <el-form-item label="头像" prop="farmerAvatarUrl">
        <el-upload
            class="avatar-uploader"
            :action="url"
            :show-file-list="false"
            :before-upload="beforeUploadHandle"
            :on-success="successHandle">
            <img v-if="dataForm.farmerAvatarUrl" :src="dataForm.farmerAvatarUrl" class="avatar">
            <i v-else class="el-icon-plus avatar-uploader-icon"></i>
            <div v-if="!dataForm.fileUrl" class="el-upload__text">1将文件拖到此处，或<em>点击上传</em></div>
        </el-upload>
    </el-form-item>
</el-col>

2、JS部分

import Cookies from 'js-cookie'
data () {
    return {
        url: `${window.SITE_CONFIG['apiURL']}/oss/file/localhostUpload?token=${Cookies.get('token')}`,
        dataForm: {
            farmerAvatarUrl
        }
    }
},
methods: {
    // 头像上传之前
    beforeUploadHandle (file) {
      if (file.type !== 'image/jpg' && file.type !== 'image/jpeg' && file.type !== 'image/png' && file.type !== 'image/gif') {
        this.$message.error(this.$t('upload.tip', { 'format': 'jpg、png、gif' }))
        return false
      }
    },
    // 头像上传成功
    successHandle (res, file, fileList) {
      if (res.code !== 0) {
        return this.$message.error(res.msg)
      }
      this.$message.success('图片上传成功')
      this.dataForm.farmerAvatarUrl = res.data
    },
}