前端图片上传解决方案

73

clipboard.png

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

1.input 标签之 file 类型

2.FileReader 对象:读取文件

3.FileReader.readAsDataURL():将读取的文件转换为 base64 编码的字符串

4.FormData 对象

5.使用 axios 上传


input 标签之 file 类型

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

clipboard.png

file-input 有如下属性:

  • accept
    指定选择文件类型的范围。默认为所有文件类型
    图片为 accept=”image/*“
    文件类型取值见MDN
  • capture
    当文件类型为图片或视频且在移动端时,此属性才有意义。
    capture = ‘user’ 调用前置摄像头
    capture = ‘environment’ 调用后置摄像头
    不设置则为用户自己选择
  • multiple
    一个 Boolean 值,如果存在,则表示用户可以选择多个文件
  • files
    返回一个 FileList,列出每个所选文件对象。除非 multiple 指定了属性,否则此列表只有一个成员。主要用于 JS 操作。
<!-- html -->
<input type="file" multiple id="imgLocal" accept="image/*" />
// 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表单提交文件等方式,可能不太自由。诸位有兴趣的可以看一下。
如果您觉得文章还不错,请随手点个赞,您的认同是我的动力!


如果觉得我的文章对你有用,请随意赞赏

你可能感兴趣的

小moo · 1月9日

想问下博主写过前端图片直传到阿里的oss,oss会返回路径,前端再把路径传给后端嘛?我这里是移动端,后端不做传图,前端自己传,很蛋疼。幸好不是重要功能,暂时先搁置

回复

0

你们后端也是胆子大,阿里云的密钥这些,打包到前端真的好么,显然应该后端给出一个接口就完事了,重要信息后端控制才对

luckyjiet · 5月24日
李通 · 1月9日

let inp = document.querySelector('#imgLocal')
inp.onchange = function(e) {
let fileList = document.querySelector('#imgLocal').files
console.log(fileList) //files
}
</script>
</head>
<input type="file" accept="image/*" id="imageLocal" capture />

<input type="button" id="btn1" value="获取文件列表" />
在 inp.onchange = function(e) 报错
upload.html?__hbt=1547035473851:9 Uncaught TypeError: Cannot set property 'onchange' of null

at upload.html?__hbt=1547035473851:9

回复

李通 · 1月9日

最后的结果是什么,图片上传后腐服务器怎么接受

回复

码码码畜 · 1月10日

就这?50个赞不知道怎么来的。。。

回复

LeonWuV · 1月15日

写这么多,说了个啥?

回复

载入中...