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;
			}