vue中elementUI 里面的图片上传问题。el-upload

 

<el-form-item label="封面图">
  <el-upload
    class="avatar-uploader"
    :action="reqUploadImgApi"
    name="photo"
    :show-file-list="false"
    :on-success="handleAvatarSuccess"
    :before-upload="beforeAvatarUpload">
    <img v-if="form.photo" :src="form.photo" class="avatar">
    <i v-else class="el-icon-plus avatar-uploader-icon"></i>
  </el-upload>
</el-form-item>

//api.js
export const reqUploadImgApi = httpURL + '/teachtool/article/uploadimg'

import {reqUploadImgApi} from '../config/api'
export default {
  data() {
    return {
      reqUploadImgApi,
      form:{
        photo:''
       }
    }
}
// 上传的回调
handleAvatarSuccess(res, file) {
  this.photo = URL.createObjectURL(file.raw);
  console.log(res)
  if(res.status == '1'){   // 上传成功
      this.form.photo = res.msg
  }
},
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;
}

注意，上传文件用的接口 api  是代理之后的。