In recent years, Uniapp has become the first choice for more and more developers in the field of mobile application development. Uniapp is a new development framework through which developers can develop multi-terminal applications, thus improving the development efficiency of engineers. This article will provide a detailed introduction and explanation of Uniapp’s photo upload and delete operations.
1. Implementation of picture upload
Camera and picture selection are one of the common functions. Uniapp provides a rich API interface to enable cameras, photo albums, WeChat Moments, online files, etc. Multiple ways of selecting and uploading images are possible. Below we will introduce in detail how Uniapp's API interface implements the image upload function.
Uniapp provides a very easy-to-use component, uni-upload, which can upload files asynchronously, and then select through uni-upload Image upload function.
First add the following code on the front-end page:
上传图片
In this code, we define auni-upload
component, in whichupload-url# The ## attribute is the URL address of the image upload,
on-successand
on-failcorrespond to the callback functions for upload success and failure respectively.
@clickThe attribute triggers the upload function after clicking.
successand
failin the Vue instance:
methods: { success(res){ console.log("上传成功"); }, fail(err){ console.log("上传失败"); }, upload(){ uni.chooseImage({ sizeType: ['compressed'], sourceType: ['album', 'camera'], success: (res) => { const tempFilePaths = res.tempFilePaths; uni.uploadFile({ url: this.uploadUrl, filePath: tempFilePaths[0], name: 'file', success: (res) => { this.success(res) }, fail: (err) => { this.fail(err) } }); } }); } }
successand
fail. When the upload succeeds or fails, the corresponding callback function will be executed. In the
uploadfunction, we use the uni.chooseImage method to select the image, obtain the temporary file path, and use the uni.uploadFile method to upload the file to the server. The
nameattribute represents the key value corresponding to the file, that is, the parameter name of the file received on the server.
uni.uploadFileinterface, we add a parameter in the success callback function to receive the result returned by the backend after the upload is successful. The modified code is as follows:
methods: { success(res){ const data = res.data; console.log(data); console.log("上传成功"); }, fail(err){ console.log("上传失败"); }, upload(){ uni.chooseImage({ sizeType: ['compressed'], sourceType: ['album', 'camera'], success: (res) => { const tempFilePaths = res.tempFilePaths; uni.uploadFile({ url: this.uploadUrl, filePath: tempFilePaths[0], name: 'file', success: (res) => { this.success(res); }, fail: (err) => { this.fail(err); } }); } }); } }
success.
methods:{ deleteImage(index) { const filePath = this.uploadList[index].filePath; uni.removeSavedFile({ filePath: filePath, success(res) { console.log(res) }, fail(err) { console.log(err) } }); } }
删除
deleteImagemethod is used to delete the corresponding file.
methods:{ deleteImage(index) { const url = 'your_delete_url'; const fileID = this.uploadList[index].url; uni.request({ url: url, method: 'DELETE', data:{ fileID:fileID, key:'value' // 可以添加其他参数 }, success: (res) => { console.log(res); }, fail: (err) => { console.log(err); } }); } }
The above is the detailed content of Let's talk about Uniapp's photo upload and delete operations. For more information, please follow other related articles on the PHP Chinese website!