foreword
-
Recently, I am using uni-app to write the H5 mobile terminal. There is a function of taking pictures from the mobile phone, selecting pictures from the album and uploading them to the document server.
-
Check uni-app to find out about uploading pictures, uni-file-picker file upload, uni.chooseImage, uni.uni.uploadFile
-
It is similar to the principle of the PC side, both are uploaded by file objects, the PC side uses the new file object, and uni-app directly provides
understand by yourself
1. uni.chooseImage is the api provided by uni-app to call the phone to take pictures and select pictures from the album
2. uni-file-picker file upload is a component of uni-app that encapsulates uploaded pictures and files, and it contains the uni.chooseImage API
3. uni.uploadFile() is uni-app, in order to make up for the defects of the original uni.request, you can directly write the file server address
4. The uni-file-picker file upload default is that we have the upload space uniCloud, so the upload attribute is not set in the attribute
5. As for what is the upload space, uni-app has a choice when creating a project, and there is no upload space. Use uni.uploadFile() to upload the document server
5. Finally, we can use uni-file-picker file upload (including uni.chooseImage) + uni.uploadFile() to achieve this function
important point
1. If the uni-app project has no upload space, the events of uni-file-picker file upload will not be triggered
2. uni.chooseImage-api return value
The documentation says that tempFiles is a File object. If you directly use the 0 item in this as a parameter, an error may be reported. The correct one is
const tempFilePaths = e.tempFiles[0].file;
3. When uni.uploadFile() sends a request,
3.1 Like axios, it will help us wrap a layer of data outside, and we need to write an extra data (res.data.data) when fetching the value
3.1 Its return result is a json format string, which needs to be converted into a js object. If it is not converted, the value is gray and cannot be retrieved
4. When uploading uni-file-picker files, you need to pay attention to the need to have 3 values when echoing through: value="fileLists"
5. Documents and many documents say that manual upload is required when there is no upload space. In fact, there is no need to write a special button to use manual upload.
5.1 Manual upload is just like getting pictures. When clicking the button, uploading has no substantive effect, so there is no need to write manual upload
5.2 Even if we don’t bind the upload space, we don’t need to manually upload and directly select the picture, it will trigger @select="select" to upload with uni.uploadFile()
6. Rendering
code matters
1. In the form form -uni-forms write upload component code -uni-forms
If the title is not written, the right 0/9 upload image limit will not appear
<uni-forms-item label="">
<uni-file-picker limit="9" :value="fileLists" title="维修单据" :image-styles="imageStyles"
:sourceType="sourceType" @select="select" @progress="progress" @success="success"
@fail="fail" @delete="deletea" />
</uni-forms-item>2. Variables in data
// 图片回显
fileLists: [],
// 上传图片的样式
imageStyles: {
width: 90,
height: 90,
},
// uni.chooseImage值，从相册选择，拍摄
sourceType: ['album', 'camera'],3.method event
// 获取上传状态
select(e) {
console.log('选择文件：', e)
// 解决file对象取值问题
const tempFilePaths = e.tempFiles[0].file;
uni.uploadFile({
url: '文档服务器地址',
// 要上传文件对象
file: tempFilePaths,
文件对应的 key , 开发者在服务器端通过这个 key 可以获取到文件二进制内容
name: 'file',
// 请求头设置
// 我们是需要token和用户id登录时存从uni-app数据存储中取
header: {
"token": uni.getStorageSync('token'),
"tenant-id": uni.getStorageSync('tenant-id')
},
// 成功函数
success: (res) => {
// uni.uploadFile默认在外面包了一层data
console.log('上传成功', res.data);
// uni.uploadFile返回来的结果默认是JSON格式字符串，需要用JSON.parse转换成js对象
console.log('上传数据转换',JSON.parse(res.data));
// 取到文档服务器的值
let uploaddata = JSON.parse(res.data)
let x = {}
// 下面3个值是uni-app规定的一个不能少
x.url = uploaddata.url
x.extname = ''
x.name = uploaddata.filename
this.fileLists.push(x)
},
// 失败提示用户重新上传
fail: error => {
console.log('失败', error);
}
})
},
// 获取上传进度
progress(e) {
// 没有上传空间，不会执行
console.log('上传进度：', e)
},
// 上传成功
success(e) {
// 没有上传空间，不会执行
console.log('上传成功')
},
// 上传失败
fail(e) {
// 没有上传空间，不会执行
console.log('上传失败：', e)
},
// 删除
deletea(e) {
console.log('删除图片', e);
},Summary: This has been tried and succeeded. Don't just copy it step by step. If something goes wrong, look at it step by step. Don't worry, don't be misled.
After this process, I believe you also have a preliminary deep impression on the uni-app uni-file-picker file upload to achieve shooting from the album to select the image to upload to the file server, but the situation we encountered in the actual development must be different. The same, so we have to understand its principle, and it remains the same. Come on, hit the workers!
Please point out any deficiencies, thank you -- Fengguowuhen