Element文件上传-解决跨域

以照片墙为例

官方源码

<el-upload
  action="https://jsonplaceholder.typicode.com/posts/"
  list-type="picture-card"
  :on-preview="handlePictureCardPreview"
  :on-remove="handleRemove">
  <i class="el-icon-plus"></i>
</el-upload>
<el-dialog :visible.sync="dialogVisible">
  <img width="100%" :src="dialogImageUrl" alt="">
</el-dialog>
<script>
  export default {
    data() {
      return {
        dialogImageUrl: '',
        dialogVisible: false
      };
    },
    methods: {
      handleRemove(file, fileList) {
        console.log(file, fileList);
      },
      handlePictureCardPreview(file) {
        this.dialogImageUrl = file.url;
        this.dialogVisible = true;
      }
    }
  }
</script>

默认提交到action指定的url，如果是跨域的情况下。该方式是不支持的！

需要使用 :http-request 的方式上传

    <el-upload
            action=""
            :http-request="upload"
            list-type="picture-card"
            :on-preview="handlePictureCardPreview"
            :on-remove="handleRemove">
        <i class="el-icon-plus"></i>
    </el-upload>
    <el-dialog :visible.sync="dialogVisible">
        <img width="100%" :src="dialogImageUrl" alt="">
    </el-dialog>

:http-request 指定自定义的方法,上传文件

注意:action=“” 必须存在,给个空字符串即可。不能没有

        upload(param) {
            const formData = new FormData()
            formData.append('file', param.file)
            axios.post(url, formData).then(response => {
                //根据返回值进行判断是否上传成功
                if(response.data.flag){
                    //上传成功
                    console.log('上传图片成功')
                }else{
                    //上传失败
                    console.log('图片上传失败')
                }
            }).catch(response => {
                console.log('异常处理')
            })
        }

如果要限制上传文件的文件数，需要使用 :limit=“限制数”
这儿:limit=“6” 设置了最大上传文件的数量为6

    <el-upload
            action=""
            :http-request="upload"
            :limit="6"
            list-type="picture-card"
            :on-preview="handlePictureCardPreview"
            :on-remove="handleRemove">
        <i class="el-icon-plus"></i>
    </el-upload>
    <el-dialog :visible.sync="dialogVisible">
        <img width="100%" :src="dialogImageUrl" alt="">
    </el-dialog>

有时我们需要对上传的文件进行格式限制，使用 :before-upload
:before-upload=“beforeAvatarUpload” 在文件上传之前进行文件大小，格式等判断，是否允许上传

    <el-upload
            action=""
            :http-request="upload"
            :limit="6"
            list-type="picture-card"
            :before-upload="beforeAvatarUpload"
            :on-preview="handlePictureCardPreview"
            :on-remove="handleRemove">
        <i class="el-icon-plus"></i>
    </el-upload>
    <el-dialog :visible.sync="dialogVisible">
        <img width="100%" :src="dialogImageUrl" alt="">
    </el-dialog>

这儿规定了只能上传对应格式的图片,和文件的大小
返回true允许上传,false阻止上传

            beforeAvatarUpload(file) {
                const isJPG =
                        file.type === "image/gif" ||
                        file.type === "image/jpg" ||
                        file.type === "image/jpeg" ||
                        file.type === "image/png";
                const isLt2M = file.size / 1024 < 1;
                if (!isJPG) {
                    this.$message.error("仅支持gif,jpg,png格式的图片！");
                }
                if (!isLt2M) {
                    this.$message.error("上传图片大小不能超过 1MB!");
                }
                return isJPG && isLt2M;
            }