前端上传图片

1. 使用element-ui中的el-upload上传图片
   HTML:

 <el-upload
                            class="avatar-uploader"
                            :headers="uploadHeader"
                            :action="UploadUrl()"
                            :show-file-list="false"
                            :on-error="uploadFail"
                            :on-success="handleAvatarSuccess"
                            :before-upload="beforeAvatarUpload">
                        <img v-if="addShufflingUrl" :src="addShufflingUrl" class="avatar">
                        <i v-else class="el-icon-plus avatar-uploader-icon"></i>
</el-upload>

 data () {
            return {
                uploadHeader:{token:"5a041e7fc9da52000e1c5278"}
            }
        },

JS:

             // 上传接口
            UploadUrl:function(){
                return this.testDomain+"/images";
            },
            // 上传之前
            beforeAvatarUpload(file) {
                // 图片的类型
                const imgType = file.type === 'image/jpeg' || file.type === 'image/jpg' || file.type === 'image/png';
                // 图片的大小
                const imgSize = file.size / 1024 > 200 && file.size / 1024 < 500;
                if (imgType != true) {
                    this.$message({message: "图片上传的格式不正确,中止上传", type: "warning"});
                }
                if (!imgSize) {
                    this.$message({message: "图片的大小必须在 200KB - 500KB 之间", type: "warning"});
                }
                return imgType && imgSize; // 若返回false，则中止上传
            },
            // 图片上传成功
            handleAvatarSuccess(res, file) {
                this.addShufflingUrl = res.url;
            },
            // 图片上传失败
            uploadFail(err, file, fileList){
                if(JSON.parse(err.message).code >= 400000){
                    alert(JSON.parse(err.message).code +" "+ " " + JSON.parse(err.message).message);
                }
            },

注意：

 1. :headers="uploadHeader"为上传时需要在请求头里边添加上对应的token。
     uploadHeader:{token:"5a041e7fc9da52000e1c5278"}为对应的token的值。

2. UploadUrl为上传接口，方便全局定义url时候调用