前言
上传图片是网站或应用开发中常见的功能，而基于 Vue.js 的移动端 UI 组件库 Vux 中也提供了一个上传组件 vux-uploader。虽然该组件的功能已经比较完备，但是我发现其中对于一些常用场景的支持还不够完善，于是我 fork 了 Vux 的源码，扩展了该组件的功能，并发布了一个新的 npm 包 @yantao0527/vux-uploader。
本文介绍了如何使用这个扩展组件实现移动端图片上传的功能。
安装
可以通过 npm 或 yarn 安装 @yantao0527/vux-uploader：
npm i @yantao0527/vux-uploader -S
yarn add @yantao0527/vux-uploader
使用
和 Vux 原生的 vux-uploader 一样，我们需要在 Vue 的组件中引入 vux-uploader 组件，并使用 uploader 参数指定要上传的图片：
-- -------------------- ---- ------- ---------- ------------- ---------------- ------------ --------- - ------ - - -- ----------------------------- - ------------------------ --------------- -----------展开代码
其中，url 参数指定上传文件的接口地址，uploader 参数传递了一个包含 formData 属性的对象，用来传递一些额外的参数，这些参数在后台接口中使用。
同时，我们传递了一个插槽子组件，用来展示上传的图片。
接着，在组件的 methods 中实现上传成功后的处理逻辑：
methods: { onUploadSuccess(res, file) { console.log(res) console.log(file) }, }
当上传成功后，onUploadSuccess 方法会被调用，其中 res 参数包含了后台返回的响应数据，file 参数包含了上传的文件信息。
更多功能
除了以上的功能外，@yantao0527/vux-uploader 还多了以下的一些扩展功能。
对上传图片大小的限制
在实际应用中，经常会碰到需要限制上传图片的大小的需求。我们可以在 vux-uploader 中增加 maxLength 属性，指定上传图片的最大大小（以 K 为单位）：
<vux-uploader :url="uploadUrl" :uploader="{ formData: { bizId: 1 } }" :max-length="1" @on-success="onUploadSuccess" > <div>将图片拖到这里或者点击上传</div> </vux-uploader>
在此例中，我们设置了上传图片大小为 1KB 以内。
对图片质量进行压缩
在移动端，由于手机照片的尺寸和大小普遍较大，如果直接上传这些照片到后台，不仅会占用大量的存储空间，而且还可能会导致上传速度很慢。因此，对上传图片做一些压缩处理，就变得十分必要。
@yantao0527/vux-uploader 的扩展版中，我们增加了 compression 属性，用来指定上传图片的压缩质量（取值范围为 0~1），例如：
<vux-uploader :url="uploadUrl" :uploader="{ formData: { bizId: 1 } }" :compression="0.7" @on-success="onUploadSuccess" > <div>将图片拖到这里或者点击上传</div> </vux-uploader>
在这个例子中，我们设定了图片的压缩质量为 70%。
自定义图片预览
当用户上传了一张图片后，我们通常需要展示预览图。 Vux 原生的 vux-uploader 中内置了一个展示预览图的组件 vux-uploader-preview，但是该组件的样式和展示方式可能并不符合我们的应用场景需要。
因此，我们将图片预览的功能开放出来，这样用户就可以根据自己的需要，自定义图片的展示方式。
我们可以在 onUploadSuccess 回调中对上传成功的图片进行自定义处理，例如展示到一个列表中：
-- -------------------- ---- ------- ---------- ----- ------------- ---------------- ------------ --------- - ------ - - -- --------------- ----------------------------- - ---- --------------------- --- ---------------------- --------------- ---- ------- ---- ----------------- ------------- ------ -- --------- --------------- ---- --------------- ------ -- ---- ----------------- ---- --------------- ------------------------------------ ------ ------ ------ ------ ----------- -------- ------ ------- - ------ - ------ - ---------- -------------------- --------- --- - -- -------- - -------------------- ----- - -- ----------- -------- - -------------------- --- -------- ---- ------------- ----------- ---------- -- -- ------------------ - --------------------------- -- -- -- - ---------展开代码
在这个例子中，我们使用了一个 fileList 数据数组来保存上传成功的图片信息，然后在 onUploadSuccess 方法中将每个图片的信息添加到数组中，并在组件的模板中展示出来。
总结
@yantao0527/vux-uploader 扩展版是一个基于 Vux 的 vux-uploader 组件并增加了一些常用功能的 npm 包。通过本文的介绍，我们了解了如何使用该扩展版组件完成移动端图片上传的功能，并且掌握了一些常用的扩展功能。对于需要开发移动端图片上传功能的开发者来说，该组件可以大大简化开发难度，提高开发效率。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/6005589e81e8991b448d5e51
