Shulou(Shulou.com)05/31 Report--

This article mainly introduces "how to realize the picture upload function of WeChat Mini Programs". In the daily operation, I believe that many people have doubts about how to realize the picture upload function of WeChat Mini Programs. The editor consulted all kinds of materials and sorted out simple and easy-to-use operation methods. I hope it will be helpful to answer the doubts of "how to realize WeChat Mini Programs's picture upload function". Next, please follow the editor to study!

The first is the static layout and style section.

.wxml code section

.wxss code section

/ * upload pictures * / .load-name {height: 80rpx; line-height: 80rpx; font-size: 30rpx;} .load-box {display: flex; flex-direction: row; flex-wrap: wrap;} .img-item, .img-add {position: relative; width: 140rpx; height: 140rpx; margin: 20rpx;} .img-add {border: 1px solid # ccc }. Img-add:after {width: 1rpx; height: 50rpx; content: "; position: absolute; top: 50%; left: 50%;-webkit-transform: translate (- 50%,-50%);-ms-transform: translate (- 50%,-50%); transform: translate (- 50%,-50%); background-color: # ccc;}. Img-add:before {position: absolute Top: 50%; right: 31%; width: 50rpx; height: 1rpx; content: "; display: inline-block; background-color: # ccc;}. Img-item {margin-right: 20rpx;} .img-item image {width: 100%; height: 100%; border-radius: 10rpx;} .icon {position: absolute; top: 0; right: 0;}

The above basic code can complete the layout of uploading, displaying, deleting and other styles.

The following is the part of js, which I have commented in detail ~ ~

Let's take a look at the complete code first.

/ * * Mini Program image upload * component accepts parameters * fileList image array * prevent controls whether it can be added * method * bindimageChange triggers after selecting an image * triggered after bindimageDel deletes an image * * / const app = getApp () Component ({properties: {fileList: {type: Array}, prevent: {type: Boolean, value: false}}, data: {fileList: []}, ready () {}, methods: {/ / Click the plus sign to enter the mobile album, and select _ addImg () {let _ this = this) / / this method provides api details for WeChat Mini Programs to access https://developers.weixin.qq.com/miniprogram/dev/api/media/image/wx.chooseImage.html wx.chooseImage ({count: 5, success (res) {/ / the image staging path and file size const data = res.tempFiles will be returned here _ this.setFile (data)})}, setFile (data) {/ / extend the data returned by wx.chooseImage data.map ((item, index) = > {/ / intercept the file suffix const fileFormat = item.path.substring (".") + 1, item.path.length) by path / / wx.getFileSystemManager () Mini Program file manager api, which can be converted to 64-encoding const fileManager = wx.getFileSystemManager () through the file path; const base64 = fileManager.readFileSync (item.path, 'base64'); item.fileContent = base64; item.fileSize = item.size / / get a random 13-bit random number by time and name the file with the suffix of the stitching file item.fileName = this.getFileName (13) +'.'+ fileFormat; / / the operation here is used to display the selected image. Only in this way can the base64-encoded path item.path = `data:image/$ {fileFormat}; base64,$ {base64} `be displayed. }) this.setData ({fileList: this.data.fileList.concat (data)}); / / the operation here is used to transfer the acquired file data to the parent component for file upload this.triggerEvent ('imageChange', this.data.fileList)}, / / randomly generate the file name getFileName (m) {m = m > 13? 13: M Var num = new Date (). GetTime (); return num.toString (). Substring (13-m);}, click to delete _ onDelTab (e) {/ / get the image index let idx = e.currentTarget.dataset.idx; let delFile = this.data.fileList [idx]; console.log (delFile); this.data.fileList.splice (idx, 1) This.setData ({fileList: this.data.fileList}) this.triggerEvent ('imageDel', delFile);}})

The comments on the code in the code have been very clear, we carefully pick, according to their own project to make corresponding adjustments, basically no problem, ~ ~ do not paste directly do not reset, I am directly in my project directly to take the code, direct paste and copy is definitely not possible! ~ ~

What you need to pay attention to is that here

Usually click on the real machine to select the picture after the wx.chooseImage method to return the file path is wxfile: the beginning of the path, such a path to directly transfer to base64, the above way can be achieved, I also looked up a lot of information to find the solution.

Another thing to note is that the image src attribute requires string concatenation to display pictures in base64 format before they can be displayed properly as shown below.

At this point, the study on "how to achieve WeChat Mini Programs picture upload function" is over. I hope to be able to solve everyone's doubts. The collocation of theory and practice can better help you learn, go and try it! If you want to continue to learn more related knowledge, please continue to follow the website, the editor will continue to work hard to bring you more practical articles!

Welcome to subscribe "Shulou Technology Information " to get latest news, interesting things and hot topics in the IT industry, and controls the hottest and latest Internet news, technology news and IT industry trends.