图片上传

1、先通过组件库选择对应的文件上传组件，或者自行封装的组件，示例选的的Ant Design Vue组件库。

代码：

             <a-uploadaction="xxxxxxxxx"//封装后端的上传接口地址list-type="picture"//上传的类型:default-file-list="fileList"style="margin-left: 90px"@change="up"//上传的事件><div v-if="fileList.length < 1">//限制上传图片的张数，当大于1或者等于1是就无法再次上传<a-button class="ant-upload-text"><a-icon type="upload" /> 头像上传</a-button></div></a-upload>

组件库链接：Ant Design Vue

2、封裝后端接口，点击上传获取后端返回数据。

在vue.config.js文件进行跨域配置，并封装对应的接口。

跨域配置：

            //上传文件'/entran/upload/file': { //请求代理服务器前缀target: 'https://emer..com',pathRewrite: { '^/entranc/upload/file': '/entranxxxxx/upload/file' },changeOrigin: true},//上传图片'/entran/upload/single': { //请求代理服务器前缀target: 'https://emer..com',pathRewrite: { '^/entrancxxxx/upload/single': '/entranxxxxx/upload/single' },changeOrigin: true},

接口封装：

// 用户上传头像
export function upload(action,form) {return request.post(prefixConfig.entrxxxxx + 'upload/single', form)
}
// 上传文件
export function upload1(action,form) {return request.post(prefixConfig.entxxxxx + 'upload/file', form)
}

3、在data里面配置文件或者图片的展示的数组fileList。

4、或者上传事件，图片上传有一个change事件，可以或者上传的状态以及返回的结果。

   //上传图片up(file) {console.log("成功", file);this.fileList = [...file.fileList];this.form.avatar = file.fileList[0].response.data.url;},
点击上传后，可以通过此事件得到上传的不同状态以及结果，得到我们需要得值，然后一起发送后台就可以了

文件上传

1、组件代码：

           <a-uploadaction="entranxxxx/upload/file":multiple="true":file-list="fileList"//展示的数组@change="handleChange"//上传事件:remove="dele"//删除事件style="margin-left:90px"><a-button> <a-icon type="upload" /> 附件上传 </a-button></a-upload>

2、跨域配置和接口封装如上（图片上传示例）。

3、事件获取。

 //文件上传async handleChange(info) {// console.log(111,info.fileList);let fileList = [...info.fileList];// fileList = fileList.slice(-2);//限制上传文件的数量// console.log(fileList);fileList = fileList.map((file) => {if (file.response) {file.url = file.response.url;console.log();this.form.attachments.push({//添加到上传后端的表单数据里面filename: file.response.data.filename, //名称url: file.response.data.url, //路径});}return file;});this.fileList = fileList;// console.log(2222, this.form.attachments);},

4、在点击修改后，需要把文件进行相关的展示，需要用到前面讲到的fileList。

  //查询async findinfo(id) {console.log(id);this.form = await findGroup(id);console.log(this.form);//点击修改得到具体某一个数据，然后把文件的列表遍历添加到fileList数组里面，这样当点击修改就可以看到具体的文件情况this.fileList = this.form.attachments.map((item,index)=> {return {uid: index,name: item.filename,status: 'done',url: item.url,}})},

5、当修改的时候可以对文件进行删除或者新增，如果是删除就需要调用组件删除remove的事件，如果后后台接口直接调用接口删除，如果没有就直接操作当前的对象数据，确认修改后重新赋值。

 //删除文件dele(file) {console.log(1111, file);
//得到当前点击的文件信息，通过筛选把url相同的文件直接去除掉，就得到了删除后的新数组。this.form.attachments = this.form.attachments.filter((item) => {return item.url!=file.url})},

大概的逻辑和代码就如上，暂时就整理到这里吧。

Vue文件上传和图片上传实例相关推荐

【SpringBoot学习】5、SpringBoot 实现文件上传，图片上传并显示功能
SpringBoot 实现文件上传,图片上传并显示功能我先看一下<颈椎病康复指南>再给大家说怎么实现的这两个功能,毕竟只是一个新手,解决这种复杂点的问题(相对而言),还是需要花费大量时间 ...
Android webview支持H5页面通过js实现文件上传、图片上传
一.问题场景: 项目中遇到通过网页上传文件的需求,IOS直接是支持的,安卓端却没反应,有些机型甚至闪退.其实是Android的webview默认是不支持<input type="fil ...
springboot+vue+element+七牛云+实现图片上传功能
注册七牛云链接地址: https://www.qiniu.com/products/kodo,免费有10G空间与免费一个月的域名地址注册后,开启对象存储,创建空间选择地区, 上传方式: 1:前端现将 ...
文件上传之图片上传题目
[A]文件上传之图片上传题目 Give me your photo PLZ 提示我好想看一些好康的图片呜呜题目 .htaccess是Apache的又一特色.一般来说,配置文件的作用范围都是全局的, ...
vue 自定义视频上传 el-upload图片上传
使用el-upload 上传视频总是报404错误,具体也不知道什么原因(如有知道的请评论告知,谢谢),去网上查了很多,代码写法确定是没有问题的,最后改为axios上传视频,就没出错了,顺便总结下图片上 ...
如何在上传的图片上写字
现在很多网站都在上传得图片上加了水印,现在我找到了一个简单的方法. <%@ Page Language="c#" Debug="true" Trace=& ...
vue项目中的h5图片上传（处理上传的时候图片被旋转的问题，并压缩图片大小）
vue的图片上传这个页面实现的主要是实现创建球队功能,里面包含队徽,球队类型,球队名称,所属地址这里除了图片上传还有一个地址的三级联动功能,这里我把这个页面都贴上来了.这个项目中使用vux作为ui ...
SpringBoot文件上传（图片上传）
这次的文件上传,以图片上传为代表,并且在前台显示图片.其它格式的文件上传差不多也是这样,只是前台的显示不同罢了在启动类中加入以下代码 //图片上传 @Overridepublic void addR ...
SSM项目/SpringBoot项目/SpringBoot+Vue前后端分离项目图片上传并查看功能实现汇总
SSM项目下的图片上传: 1.前端Js代码:用户点击"上传头像"按钮后,会执行uploadPhoto()的方法. <button type="button" ...

Vue文件上传和图片上传实例

图片上传

文件上传

Vue文件上传和图片上传实例相关推荐

最新文章

热门文章