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

本是古典何须时尚 2023-07-07 11:27 71阅读 0赞

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L01pc3NfbGlhbmdybQ_size_16_color_FFFFFF_t_70][]

<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  是代理之后的。

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L01pc3NfbGlhbmdybQ_size_16_color_FFFFFF_t_70]: https://img-blog.csdnimg.cn/20200223105019458.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L01pc3NfbGlhbmdybQ==,size_16,color_FFFFFF,t_70