element-ui upload

之前項目里面需要添加產品，除了添加產品名稱等字段外，還要上傳產品圖片，然后看了element ui 的框架，覺得不太適合，於是自己在element-ui基礎上改寫了一個組件，見代碼

這個是upload.vue組件
<template>
    <el-upload class="avatar-uploader" :disabled="useDisabled" action="" :auto-upload="false" :on-change="submitFile" :show-file-list="false" :on-success="handleAvatarSuccess" :before-upload="beforeAvatarUpload">
        <img v-if="previewUrl" :src="previewUrl" class="avatar">
        <i v-else class="el-icon-plus avatar-uploader-icon"></i>
    </el-upload>
</template>

<script>
import { Upload } from 'element-ui'
export default {
    props: ['imageUrl', 'useDisabled', 'name'],
    data() {
        return {
            url: undefined,
            disabled: false
        }
    },
    components: {
        "el-upload": Upload
    },
    computed: {
        previewUrl() {
            if (this.url) {
                return this.url;
            }
            let reg = /^([A-Za-z0-9+/]{4})*([A-Za-z0-9+/]{4}|[A-Za-z0-9+/]{3}(=)?|[A-Za-z0-9+/]{2}(==)?|[A-Za-z0-9+/]{1}(===)?)$/
            if (reg.test(this.imageUrl)) {
                if (this.imageUrl.indexOf('data:image', 0) == -1) {
                    return `data:image/jpeg;base64,${this.imageUrl}`;
                }
            }  //這里的功能主要是修改時候，獲取單條產品信息會返回圖片字段，這里就不用加上圖片base64解析 data:image/jpeg;base64 return this.imageUrl
        }
    },
    methods: {
        preview(file) {  //這里是預覽圖片 var fr = new FileReader()
            fr.onloadend = () => {
                this.url = fr.result;
            }
            fr.readAsDataURL(file.raw)
        },
        submitFile(file) {
            // var formData = new FormData(); //調用接口上傳data:formData
            // formData.append('file', file.raw);  //這里要說明一下，如果直接使用element-ui的upload組件的時候，這里的formData字段就是拿到的文件，可以直接傳給后台，但是我要把這個上傳功能放在頁面去處理，於是向上觸發了
            this.preview(file);
            this.$emit('uploadFun', {
                name: this.name,
                file
            })
            // console.log(formData)
        },
        handleAvatarSuccess(res, file) {
            this.url = URL.createObjectURL(file.raw);
        },
        beforeAvatarUpload(file) {
            const isJPG = file.type === 'image/jpeg';
            const isLt2M = file.size / 1024 / 1024 < 2;
            if (!isJPG) {
                this.$message.error('上傳頭像圖片只能是 JPG 格式!');
            }
            if (!isLt2M) {
                this.$message.error('上傳頭像圖片大小不能超過 2MB!');
            }
            return isJPG && isLt2M;
        }
    }

}
</script>

<style>

</style>

引入upload組件后，在addProduct.vue頁面中調用

<upload-img v-on:uploadFun="uploadFun" name="productImage" :imageUrl="productImage"> </upload-img>  //這里的productImage就是后台需要的字段

　　uploadFun(file) {

　　this.files[file.name] = file.file.raw;

　　},//upload組件中派發的方法

然后在點擊添加產品按鈕上綁定函數 

   　　　　　 let proInfo = {
      　　　　  product:product
            }
            var formData = new FormData()
            for (let key in this.files) {
                formData.append(key, this.files[key])
            }
            for (let key in proInfo) {
                formData.append(key, proInfo[key])
            }    

然后傳給后台 formData字段即可。