前端图片上传解决方案

Seay 发布于2019-08-30 15:55 / 3168人阅读

摘要：图片上传是前端开发中经常使用到的，上传方案也有很多种吧，可能你有在使用一些插件完成上传，比如我以前自己写的一个后台系统现在在这里总结下图片上传的解决方案。构造函数返回一个新构造的。事件及方法我们主要是用事件及方法，其他见处理事件。

图片上传是前端开发中经常使用到的，上传方案也有很多种吧，可能你有在使用一些插件完成上传，（比如我以前自己写的一个后台系统）现在在这里总结下图片上传的解决方案。主要有一下几种：

1.input 标签之 file 类型 2.FileReader 对象：读取文件 3.FileReader.readAsDataURL()：将读取的文件转换为 base64 编码的字符串 4.FormData 对象 5.使用 axios 上传 input 标签之 file 类型

当设置 input 标签 type 为 file 时，input 表现性状为上传文件样式

file-input 有如下属性：

accept
指定选择文件类型的范围。默认为所有文件类型
图片为 accept=”image/*“
文件类型取值见MDN

capture
当文件类型为图片或视频且在移动端时，此属性才有意义。
capture = ‘user’ 调用前置摄像头
capture = ‘environment’ 调用后置摄像头
不设置则为用户自己选择

multiple
一个 Boolean 值，如果存在，则表示用户可以选择多个文件

files
返回一个 FileList，列出每个所选文件对象。除非 multiple 指定了属性，否则此列表只有一个成员。主要用于 JS 操作。

// js
let inp = document.querySelector("#imgLocal")
inp.onchange = function(e) {
  let fileList = document.querySelector("#imgLocal").files
  console.log(fileList) //files
}

FileReader 对象

我们用 FileReader 对象实现图片预览功能。

FileReader 对象允许 Web 应用程序异步读取存储在用户计算机上的文件（或原始数据缓冲区）的内容，使用 File 或 Blob 对象指定要读取的文件或数据。

构造函数

new FileReader()

返回一个新构造的 FileReader。

属性

FileReader.readyState
表示 FileReader 状态的数字，取值如下
0：EMPTY/还没有加载任何数据
1：LOADING/数据正在被加载
2：DONE/已完成全部的读取请求

FileReader.result
文件的内容。该属性仅在读取操作完成后才有效。

FileReader.error

事件及方法

我们主要是用 FileReader.onload 事件及 FileReader.readAsDataURL() 方法，其他见MDN

FileReader.onload
处理 load 事件。该事件在读取操作完成时触发
FileReader.readAsDataURL()
开始读取指定的 Blob 中的内容。一旦完成，result 属性中将包含一个 data: URL 格式的字符串以表示所读取文件的内容。

//继续使用上文的fileList
let file = fileList[0]
const fileReader = new FileReader()
fileReader.readAsDataURL(file) //读取图片
fileReader.addEventListener("load", function() {
  // 读取完成
  let res = fileReader.result
  // res是base64格式的图片
})

我们将 DOM 上 img 的 src 设为读取的结果即可实现预览功能。

FormData 对象

FormData 对象的使用：

1.用一些键值对来模拟一系列表单控件：即把 form 中所有表单元素的 name 与 value 组装成
一个 queryString
2.异步上传二进制文件。

构造函数

new FormData()

返回一个新构造的 FormData。

方法

FormData 方法有很多。我们这里只用了她的 append()方法

formData.append(name, value, filename)

name:属性名
value:属性值，在我们这里则指 file 数据
filename:当第二个参数为 file 或 blob 时，告诉服务器的文件名。Blob 对象的默认文件名是“blob”。File 对象的默认文件名是文件的文件名。
代码如下：

// 继续使用上文的file
const formDate = new FormData()
formDate.append("userPicture", file, "1.jpg")

使用 axios 上传

大家都知道axios可以做数据请求，也可以实现图片上传的功能，主要是设置 header 中的 Content-Type

//继续使用上文的formDate
let config = {
  headers: {
    "Content-Type": "multipart/form-data"
  }
}
axios
  .post("serverUrl", formDate, config)
  .then(res => {
    console.log(res)
  })
  .catch(err => {
    console.log(err)
  })

axios 也可以使用onUploadProgress监听上传进度，不再赘述。

其他

其他还有直接form表单提交文件等方式，可能不太自由。诸位有兴趣的可以看一下。
如果您觉得文章还不错，请随手点个赞，您的认同是我的动力！

混合云专线服务前端js图片上传教程上传图片到服务器前端前端上传form表单图片上传

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/117186.html

前端图片上传解决方案

摘要：图片上传是前端开发中经常使用到的，上传方案也有很多种吧，可能你有在使用一些插件完成上传，比如我以前自己写的一个后台系统现在在这里总结下图片上传的解决方案。构造函数返回一个新构造的。事件及方法我们主要是用事件及方法，其他见处理事件。 showImg(https://segmentfault.com/img/bVbmLXM?w=500&h=500); 图片上传是前端开发中经常使用到的，上传...

Acceml 2019-08-02 14:03 评论0 收藏0
前端图片上传解决方案

摘要：图片上传是前端开发中经常使用到的，上传方案也有很多种吧，可能你有在使用一些插件完成上传，比如我以前自己写的一个后台系统现在在这里总结下图片上传的解决方案。构造函数返回一个新构造的。事件及方法我们主要是用事件及方法，其他见处理事件。 showImg(https://segmentfault.com/img/bVbmLXM?w=500&h=500); 图片上传是前端开发中经常使用到的，上传...

xuexiangjys 2019-08-23 14:32 评论0 收藏0
结合Vue.js的前端压缩图片方案

摘要：图片文件大小减小后，上传速度自然会提升，在同样的并发下，后台处理的速度也会得到提升，用户体验得到提升。这是一个很简单的方案。嗯，是真的。为什么要这么做？在移动Web蓬勃发展的今天，有太多太多的应用需要让用户在移动Web上传图片文件了，正因如此，我们有些困难必须去攻克：低网速下上传进度缓慢，用户体验差高并发下，后台处理较大的上传文件压力大或许有更多... 在攻克上面的一些...

Awbeci 2019-08-05 10:18 评论0 收藏0
结合Vue.js的前端压缩图片方案

摘要：图片文件大小减小后，上传速度自然会提升，在同样的并发下，后台处理的速度也会得到提升，用户体验得到提升。这是一个很简单的方案。嗯，是真的。为什么要这么做？在移动Web蓬勃发展的今天，有太多太多的应用需要让用户在移动Web上传图片文件了，正因如此，我们有些困难必须去攻克：低网速下上传进度缓慢，用户体验差高并发下，后台处理较大的上传文件压力大或许有更多... 在攻克上面的一些...

sutaking 2019-08-20 11:59 评论0 收藏0
文件批量上传ZIP方案调研

摘要：本调研主要关注方案的效率以及整体上传效率。初步猜想包括一部分浏览器处理文件上传的时间，否则在的上传速度下，文件的时间不应该是。方案与类型，网络环境下，方案依旧在批量小图片的上传中保持一定的优势，包括多请求并发方案。介绍利用HTML5的新接口例如ArrayBuffer、Blob等可以在前端进行zip操作并且可以将zip后的文件上传到服务器。本调研主要关注zip方案的zip效率以及整...

CarterLi 2019-08-02 17:59 评论0 收藏0