vue图片上传

最新推荐文章于 2024-05-28 09:42:09 发布

qq_33779502

最新推荐文章于 2024-05-28 09:42:09 发布

阅读量719

点赞数 1

分类专栏： vue 文章标签： vue文件上传 element ui 文件上传 vue 图片批量上传 vue 多文件上传 vue 图片上传

本文链接：https://blog.csdn.net/qq_33779502/article/details/81368705

版权

vue 专栏收录该内容

3 篇文章 0 订阅

订阅专栏

前端代码：

<el-upload
style="height: 200px;"
class="upload-demo"
ref="uploadVideoCoverDemo"
:action="http://localhost:8081/imageupload/common/imguploadurl.mvc"
:before-upload="videoCoverBefore"
:on-success="succVideoCoverUpload"
:auto-upload="false"
accept="image/*"

:multiple=“false”
:limit="1"
:file-list="fileList4"
>
<el-button slot="trigger" size="small" type="primary">选择视频封面图</el-button>
<el-button style="margin-left: 10px;" size="small" type="success" @click="submitVideoCover">上传</el-button>

</el-upload>

释义：

ref="uploadVideoCoverDemo" :手动上传时作为上传时的引用

:action="http://localhost:8081/imageupload/common/imguploadurl.mvc":上传文件路径

:before-upload="videoCoverBefore":请求路径

:before-upload="videoCoverBefore"：上传前要执行的钩子函数，可对文件进行各项操作例如大小之类的判断

:on-success="succVideoCoverUpload"：上传成功之后执行的钩子函数

:auto-upload="false" ：是否自动上传 true为自动上传 false为手动上传，当为true时：ref将不起作用，选择则好文件之后就会立马上传；当为false时：选择好文件之后还需点击上传按钮调用submitVideoCover之后才能上传，此时需要使用到ref的值作为引用

accept="image/*"：上传文件类型 audio/*代表声音文件 video/*代表视频文件 image/*代表图像文件 //可自行修改上传文件类型，上传方式均相同

:multiple=“false” ：是否允许多文件上传为true时:则可以进行多文件上传但是可以用limit进行上传个数限制注意：多文件上传原理实际上也是单个文件上传，不过与单文件上传的区别在于，单文件上传是只能选择一个进行上传，多文件上传是选择多个文件之后，自动一个一个发送请求进行上传，如果有返回参数的话，则参数是一个一个返回。

export default{

name: 'article-editor',

data(){

return{

fileList4:[] //初始化参数为空数组

},methods:{

submitVideoCover(){ this.$refs.uploadVideoCoverDemo.submit()}, //手动文件上传

videoCoverBefore(file){//文件上传前执行的钩子函数

var fileName = new Array();

fileName = file.name.split('.');

/**
* 上传成功之后的回调函数
*
*/
succVideoCoverUpload(response, file, fileList3) {
let _this = this;
if(response.bool === 'false'){
_this.fileList4 = [];//上传失败时，清除数据，再次重新选择
_this.$message({
message: '上传失败!',
type: 'warning'
});
return;
}
if(response.bool == 'true'){
$.ajax({
type:'post',
url:url,//路径可在路径上面携带参数
dataType: 'json',
cache: false,//上传文件无需缓存
processData: false,//用于对data参数进行序列化处理这里必须false
contentType: false, //必须
success:function(data){
console.log(data);//输出返回的数据
},error:function(data){
console.log(data);
}
})
}
}

}

后端Java代码：

@Controller
@RequestMapping("/imageupload/common")
public class ImageUpload extends CommonUtils{

   /**
   * 图片上传
   * @return
   */
   @RequestMapping(value="/imguploadurl",method = RequestMethod.POST)
@ResponseBody
public Map<String,String> importEnterPriseQuota(Integer userId,@RequestParam("file") MultipartFile proFile, HttpServletRequest request) {
String path = request.getSession().getServletContext().getRealPath("/upload/active/");
String filename = proFile.getOriginalFilename();
File filepath = new File(path,filename);
Map<String,String> resMap = new HashMap<String,String>();
try {
if (!filepath.getParentFile().exists()) {
   filepath.getParentFile().mkdirs();
}
proFile.transferTo(new File(path+File.separator+filename));
resMap.put("bool", "true");
resMap.put("path", "/upload/active/"+filename);
resMap.put("realPath",path+File.separator+filename);
} catch (IOException e) {
e.printStackTrace();
resMap.put("bool", "false");
}
return resMap;
}
}