526互联

elementUI使用el-upload组件上传图片

发布时间 2023-08-16 18:38:17作者: lytcreate
<el-form-item label="上传图片" :rules="[{ required: true, message: '必须要上传图片', trigger: 'blur' }]"
                        prop="image">
            <el-upload
                :action=webSite
                class="upload-demo"
                drag
                :limit="1"
                :before-upload="beforeUpload"
                :on-success="handleSuccess"
                :on-remove = "handleRemove"
                :show-file-list="true" >
              <i class="el-icon-upload"></i>
              <div class="el-upload__text">将文件拖到此处，或<em>点击上传</em></div>
              <div class="el-upload__tip" slot="tip">只能上传jpg/png文件，且不超过4M</div>
            </el-upload>
          </el-form-item>

以上是页面代码

以下是逻辑代码，主要是对图片的校验，成功后的赋值，需要后台配合返回 保存的图片信息

{'file_name': file_data.name, 'url': file_path}
    beforeUpload(file){
      const isJPG = file.type === 'image/jpeg' || file.type === 'image/png'
      const isLt5M = file.size / 1024 / 1024 < 5

      if (!isJPG) {
        this.$message.error('上传图片只能是 JPG/PNG 格式!')
      }
      if (!isLt5M) {
        this.$message.error('上传图片大小不能超过 5MB!')
      }
      return isJPG && isLt5M
    },
    handleSuccess(response) {
      this.$message.success('上传成功!')
      this.form.image = response.url;
    },
    handleRemove(){
      this.form.image=''
    },