vue上传图片完整demo+详解

最新推荐文章于 2024-07-29 20:43:09 发布

就像风1样

最新推荐文章于 2024-07-29 20:43:09 发布

阅读量4.6k

点赞数 1

分类专栏： Vue vue专栏文章标签： vue 上传图片详解

本文链接：https://blog.csdn.net/qq_42221334/article/details/85121693

版权

本文详细介绍了在Vue.js中实现图片上传的完整过程，包括设置input属性、处理文件对象、判断文件大小、使用FormData和XMLHttpRequest进行文件上传。同时，针对大于1MB的图片，文章提到了压缩处理的原理和步骤，并提供了组件封装的思路，强调了组件的灵活性和插槽的使用。

摘要由CSDN通过智能技术生成

 <div class="upload-wraper">
    <input type="file" id="upload_ele" multiple="false" accept="image/*" @change="uploadFile()" />
</div>

type=file将类型设置为选择文件

multiple是否允许文件的多选

accept="image/*" 将文件的类型限制为image类型，*包括所有格式的图片

change事件当type设置为file后，出发的事件为change,也可通过submit实现

这里布局的话，因为是vue组件所以简单点，不需要多个input构成form表单，然后通过submit提交，一个input通过change事件来实现上传

Js
Basic information for uploading files
let oFIle = document.getElementById('upload-ele').files[0];
files是input设置为file后的一个js内置对象。files对象死一个read-only属性，不可被修改！

打印出oFile后可以看到该文件对象的basic information.如下：

isClosed:false 是否已经结束，可以理解为标签是否闭合

lastModified:1539602132000最后更改的时间timeStamp

lastModifiedDate:Mon Oct 15 2018 19:15:32 GMT+0800 (CST) {}最后更改时间

name:"D9791645A5DF19D17FD7392A080E7A28.jpg"图片的名称

path:"/Users/mac/Documents/D9791645A5DF19D17FD7392A080E7A28.jpg"图片所在的路径为本地路径

Size:38938图片的大小信息单位为kb

type:'image/jpeg'图片的类型

webkitRelativePath:""文件相关的路径

File Size Processing
大小判断
(oFile.size / 1024) > 1024
1M = 1024KB

Smaller
let form = new FormData();
form.append('file',oFile);
let xhr = new XMLHttpRequest();
xhr.open('post',url,true);
xhr.timeout = 30 * 1000;
xhr.upload.onprogress = this.progress;
xhr.onload = this.uploadComplete;
xhr.onerror = this.uploadFailed;
xhr.upload.onloadstart = () => {
let date = new Date().getTime();
let initSize = 0;
}
xhr.send(form);
XMLHttpRequest()是js内置对象，可以使用该属性实现请求头的处理操作。

xhr.open(); 请求方法: post,url: 服务器接受的地址,true/false 是否异步

xhr.timeout; 设置超时时间，据情况而定

xhr.ontimeout; 超时处理，一般为取消请求

xhr.upload.onprogress; 进程处理，上传文件的进度处理

xhr.onload; 请求成功处理

xhr.onerror; 请求失败处理

Xhr.upload.onloadstart; 请求开始处理的操作，一般创建时间戳，初始化大小。

xhr.send(); 请求配置完毕，发送请求

这里小于1M的文件是可以直接通过放到formData中，通过配置xhr将图片对象上传到oss，在请求成功时拿到图片的网络路径