vue头像上传
Ⅰ Vue 上传图片到七牛云实用攻略
vue 一般采用element 的upload 上传图片/文件。
首先，设定参数
参考Element upload 文档
其次，如图所示，重点在于domain和qiniuaddr两个参数！ 参考 七牛云存储图片域名文档
然后 上传一定要先获取到七牛云token！我是采用axios post获取。
接着，把返回的 file.name赋值给 key
this.QiNiuYun.key = `name_${file.name}`;
如图 上传成功/错误处理 函数
大功告成！
补充：
1. this.uploadImageUrl 这个变量实际上是 图片真正的URL-----https地址！！！
2. 该方法是针对单图上传，如果想多图 将data 内的参数 limit：1 修改为需要的图片数量 ！！！
3. 注意！当后台需要你传递多张图片的url时，可采用 此方法！！！
//拼接 url
if(this.uploadImageList===''){
this.uploadImageList= this.uploadImageUrl;
}else{
this.uploadImageList=this.uploadImageList+';'+ this.uploadImageUrl;
}
Ⅱ vue上传头像请求接口失败怎么回事
系统bug，网络问题。
1、系统bug是vue软件系统出现了问题导致上传头像请求接口失败，等待官方修复即可。
2、网络问题是自身设备连接的网络出现较大波动，导致vue软件上传头像请求接口失败，更换网络重新打开即可。
Ⅲ day06项目【整合阿里云OSS和Excel导入分类】
为了解决海量数据存储与弹性扩容，项目中我们采用云存储的解决方案- 阿里云OSS。
1、开通“对象存储OSS”服务
（1）申请阿里云账号
（2）实名认证
（3）开通“对象存储OSS”服务
（4）进入管理控制台
2、创建Bucket
选择：标准存储、公共读、不开通
3、上传默认头像
创建文件夹avatar，上传默认的用户头像
1、在service模块下创建子模块service-oss
2、配置pom.xml
service-oss上级模块service已经引入service的公共依赖，所以service-oss模块只需引入阿里云oss相关依赖即可，
service父模块已经引入了service-base模块，所以Swagger相关默认已经引入
3、配置application.properties
4、logback-spring.xml
5、创建启动类
创建OssApplication.java
6、启动项目
报错 ：
spring boot 会默认加载org.springframework.boot.autoconfigure.jdbc.DataSourceAutoConfiguration这个类，
而DataSourceAutoConfiguration类使用了@Configuration注解向spring注入了dataSource bean，又因为项目（oss模块）中并没有关于dataSource相关的配置信息，所以当spring创建dataSource bean时因缺少相关的信息就会报错。
即可成功：
1、从配置文件读取常量
创建常量读取工具类：ConstantPropertiesUtil.java
使用@Value读取application.properties里的配置内容
用spring的 InitializingBean 的 afterPropertiesSet 来初始化配置信息，这个方法将在所有的属性被初始化后调用。
2、文件上传
创建Service接口：uploadFileAvatar.java
实现：OssServiceImpl.java
参考SDK中的：Java->上传文件->简单上传->流式上传->上传文件流
3、控制层
创建controller：FileUploadController.java
4、重启oss服务
5、Swagger中测试文件上传
解决上传文件覆盖问题：
测试：
6、配置nginx反向代理
配置nginx实现请求转发的功能：
验证：
1、复制头像上传组件
从vue-element-admin复制组件：
vue-element-admin/src/components/ImageCropper
vue-element-admin/src/components/PanThumb
2、前端参考实现
src/views/components-demo/avatarUpload.vue
3、前端添加文件上传组件
src/views/e/teacher/save.vue
template：
引入组件模块：
4、设置默认头像（也可不设置）
onfig/dev.env.js中添加阿里云oss bucket地址
组件中初始化头像默认地址
5、js脚本实现上传和图片回显
二、测试文件上传
前后端联调
1、数据导入：减轻录入工作量
2、数据导出：统计信息归档
3、数据传输：异构系统之间数据传输
1、EasyExcel特点
Java领域解析、生成Excel比较有名的框架有Apache poi、jxl等。但他们都存在一个严重的问题就是非常的耗内存。如果你的系统并发量不大的话可能还行，但是一旦并发上来后一定会OOM或者JVM频繁的full gc。
EasyExcel是阿里巴巴开源的一个excel处理框架， 以使用简单、节省内存着称 。EasyExcel能大大减少占用内存的主要原因是在解析Excel时没有将文件数据一次性全部加载到内存中，而是从磁盘上一行行读取数据，逐个解析。
EasyExcel采用一行一行的解析模式，并将一行的解析结果以观察者的模式通知处理（AnalysisEventListener）。
1、创建一个普通的maven项目
项目名：excel-easydemo
2、pom中引入xml相关依赖
3、创建实体类
设置表头和添加的数据字段
4 、实现写操作
TestEasyExcel.java
（1）创建方法循环设置要添加到Excel的数据
（2）实现最终的添加操作（写法一）
（3）实现最终的添加操作（写法二）
public static void main(String[] args) throws Exception {
// 写法2，方法二需要手动关闭流
//实现excel写的操作
//1 设置写入文件夹地址和excel文件名称
String filename = "F:\write.xlsx";
ExcelWriter excelWriter=EasyExcel.write(fileName,DemoData.class).build();
WriteSheet writeSheet=EasyExcel.writerSheet("写入方法二").build();
excelWriter.write(data(),writeSheet);
/// 千万别忘记finish 会帮忙关闭流
excelWriter.finish();
}
1、创建实体类
2、创建读取操作的监听器
3、调用实现最终的读取
public class TestEasyExcel {
public static void main(String[] args) {
//实现excel读操作
// 写法1：
String filename = "F:\write.xlsx";
// 这里 需要指定读用哪个class去读，然后读取第一个sheet 文件流会自动关闭
EasyExcel.read(filename,DemoData.class,new ExcelListener()).sheet().doRead();
// 写法2：
InputStream in = new BufferedInputStream(new FileInputStream("F:\01.xlsx"));
ExcelReader excelReader = EasyExcel.read(in, DemoData.class, new ExcelListener()).build();
ReadSheet readSheet = EasyExcel.readSheet(0).build();
excelReader.read(readSheet);
// 这里千万别忘记关闭，读的时候会创建临时文件，到时磁盘会崩的
excelReader.finish();
}
1、编辑Excel模板
2、将文件上传至阿里云OSS
1、添加路由
2、添加vue组件
1、js定义数据
2、template
3、js上传方法
4、回调函数
1、service-e模块配置依赖
1、ESubjectController
2、创建和Excel对应的实体类
3、ESubjectService
（1）接口
（2）实现类
4、创建读取Excel监听器
1、参考 views/tree/index.vue
2、创建api
api/e/subject.js
3、list.vue
1、创建vo
2、创建controller
Ⅳ vue使用input标签 type='file'上传文件
1、html中
2、js
3、注意
该api接口需要单独配置请求头headers
4、成功后会返回图片的地址，就ok了
如果你做的是上传头像的功能，并且要对图片进行裁剪，推荐个 不错的插件
Ⅳ vue上传图片设置headers表头信息
<el-form-item label="icon图标" prop="icon">
<span><img :src="ruleForm.icon_url" min-width="70" height="70" />
class="avatar-uploader"
action
name="file1"
:data="{index:1}"//传递参数
:show-file-list="false"
:http-request="uploadFileUrl" > <div class="upload-btn">上传
</el-form-item>
//上传图片
uploadFileUrl(file){
var fileIndex=file.data.index;
//console.log("=========",file.data.index);
let formData =new FormData()
formData.append("file", file.file)
/**上传图片接口*/
const instance =Axios.create({
baseURL:"http://216.118.XXX.50:8082",//服务器地址
timeout:10000,
headers:{'Content-Type':'multipart/form-data',"auth":sessionStorage.getItem("token"),"uid":sessionStorage.getItem("uid_ciphertext")},
method:'POST',
data:formData
})
instance({url:"/api/v1/admins/games/images/upload"}).then((data) => {
// console.log(JSON.stringify(data))
this.ruleForm.icon_url=data.data.data.icon_url;
})
},
Ⅵ 如何在Vue 2中处理文件上传
按需组件引入吧，这样会减少不必要的css，当然你每个组件的css要独立出来，而且如果使用webpack 的vue-loader处理 即使重复引用同一个组件css也是同用一份，不会额外的复制多个
Ⅶ 快速创建VUE移动端上传图片功能
主要功能：限制图片张数、图片大小压缩、同时上传多张、上传后可编辑删除、上传中和上传失败状态显示。
使用配置：使用vantUI、axios请求经过封装、安装image-compressor.js图片压缩
npm install image-compressor.js //注意是image-compressor.js不是image-compressor
ps：从父级页面传入相应的值到props里面
Ⅷ VUE上传图片跨域
上传组件用的elementui - upload,由于上传图片需要用户的登陆信息,所以前端请求头添加了一个token ,属于自定义header
跨域时浏览器发送options预检请求,会带上自定义的请求头字段,用来判断该字段是否被服务端支持.
Ⅸ vue 项目中上传图片 并压缩图片
有时候 我们不能去决定用户 上传图片的大小，那么我们就只能把用户上传的图片，压缩一下在传给后台，减少资源的消耗。
npm i image-conversion --save
import * as imageConversion from 'image-conversion'
beforeRead() 这个函数里边的数据才是最重要的 可以压缩用户上传的图片 压缩图片的大小 你可以自己定，还可以限制用户上传图片的格式
Ⅹ vue移动端图片上传，可最多上传9张,使用webuploader插件
图片上传WebUploader.js