Element文件上传-解决跨域

以照片墙为例

官方源码

<el-uploadaction="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-uploadaction="":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-uploadaction="":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-uploadaction="":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;}

Element文件上传-解决跨域相关推荐

java 使用oos 进行数据上传和跨域
java 使用oos 进行数据上传和跨域导入依赖 <dependency><groupId>com.aliyun.oss</groupId><artifac ...
html js文件域val,js实现文件上传表单域美化特效
一款效果非常时尚的文件上传表单域美化特效,下面给出制作的简要教程. 先上几个效果饱饱眼福: 使用方法这些文件上传域的美化使用的方法都是隐藏原生的元素,然后使用一个元素来制作美化效果. @H_502_ ...
php 美化js文件,js实现文件上传表单域美化特效_javascript技巧
一款效果非常时尚的文件上传表单域美化特效,下面给出制作的简要教程. 先上几个效果饱饱眼福: 使用方法这些文件上传域的美化使用的方法都是隐藏原生的元素,然后使用一个元素来制作美化效果. HTML结构 ...
net core WebApi——文件分片上传与跨域请求处理
文章目录前言开始测试跨域小结前言在之前整理完一套简单的后台基础工程后,因为业务需要鼓捣了文件上传跟下载,整理完后就迫不及待的想分享出来,希望有用到文件相关操作的朋友可以得到些帮助. 开始 ...
element vue 上传模板_vue+element 文件上传
一.前言 element ui 已经提供了文件上传的组件,直接拿来就能用.具有以下几个特点: 限制文件上传的个数,多个文件会发起多个请求. 可以设置文件选择后自动上传或者手动触发上传,并且手动触发可以 ...
Element文件上传 pdf 及预览
目标:vue+element 实现上传图片及pdf 和预览功能技术:vue.element.vue-pdf 安装及引入: //安装 npm install --save vue-pdf//引入 im ...
element文件上传有文件但是后台接收为空_程序员提高篇：大规格文件（G）是如何做分片优化的？...
作者:凹凸实验室链接:https://juejin.im/post/5ebb4346e51d451ef53793ad 整体思路第一步是结合项目背景,调研比较优化的解决方案. 文件上传失败是老生常谈 ...
java上传大文件_Java超大文件上传解决办法
这里只写后端的代码,基本的思想就是,前端将文件分片,然后每次访问上传接口的时候,向后端传入参数:当前为第几块文件,和分片总数下面直接贴代码吧,一些难懂的我大部分都加上注释了: 上传文件实体类: 看得 ...
阿里云OSS上传下载跨域问题
OSS文件传输使用OSS进行上传/下载操作时,时常会遇到跨域问题. 其表现为,直接通过浏览器,可以直接访问已经存储在OSS中得文件地址并下载,但是通过代码却会报跨域问题. 解决办法:登录阿里云OSS ...

Element文件上传-解决跨域

Element文件上传-解决跨域相关推荐

最新文章

热门文章