The WeChat applet uploads images to the server instance code, and the applet uploads images

The applet uploads images to the server instance code, and the applet uploads images

Upload images to the server:

1. First, write a selection area on the front end to trigger the wx. chooseImage interface and save the image path using the wx. setStorage interface.

-Wxml <view class = "shangchuan" bindtap = "choose"> <image style = "width: 100%; height: 100%; "src =" {tempFilePaths }}"> </image> </view> <button formType = 'submit 'class = "fabu"> Publish a project </button> /* * select image */choose: function () {var that = this wx. chooseImage ({count: 1, sizeType: ['original', 'compressed '], // you can specify the source image or a compressed image. Both have sourceType: ['album' by default ', 'camera '], // you can specify whether the source is an album or a camera. By default, both have success: function (res) {var tempFilePaths = res. tempFilePaths that. setData ({tempFilePaths: res. tempFilePaths}) console. log (res. tempFilePaths) wx. setStorage ({key: "card", data: tempFilePaths [0]})},

2. Use wx. uploadFile to upload the uploaded image to the server.

 formSubmit2: function (e) {    var that = this    var card = wx.getStorageSync('card')    wx.uploadFile({     url: app.globalData.create_funds,     filePath: card,     name: 'card',     formData: {      'user_id': app.globalData.user_id,      'person': e.detail.value.person,      'company': e.detail.value.company,     },     success: function (res) {      console.log(res)     }    })   }  } },

PS: A applet uploads one or more images.

I. Highlights

1. Select an image

Wx. chooseImage ({sizeType: [], // original Source image, compressed compression image, both have sourceType: [] by default, // album select image from album, camera uses camera, by default, both have success: function (res) {console. log (res); var array = res. tempFilePaths, // list of local file paths for images }})

2. upload images

Wx. uploadFile ({url: '', // filePath:'' of the developer server url, // String type of the path to upload file resources !!! Name: 'uploadfile', // key of the file, (the image request parameter specified by the background Interface) header: {'content-type ': 'multipart/form-data'}, // set the request header formData :{}, // other parameters in the HTTP request success: function (res) {}, fail: function (res ){}})

Ii. Sample Code

// Click Upload image ups.pdf logo: function () {var that = this; wx. showActionSheet ({itemList: ['select from album ', 'photographed'], itemColor: "# f7982a", success: function (res) {if (! Res. cancel) {if (res. tapIndex = 0) {that. chooseWxImageShop ('alipay')} else if (res. tapIndex = 1) {that. chooseWxImageShop ('camera ') }}}, chooseWxImageShop: function (type) {var that = this; wx. chooseImage ({sizeType: ['original', 'computed'], sourceType: [type], success: function (res) {/* upload a single sheet that. data. orderDetail. shopImage = res. tempFilePaths [0], that. upload_file (API_URL + 'shop/shopcon ', res. tempFilePaths [0]) * // * upload multiple (traverse the array and upload one at a time) for (var index in res. tempFilePaths) {that. upload_file (API_URL + 'shop/shopimag', res. tempFilePaths [index])} */}, upload_file: function (url, filePath) {var that = this; wx. uploadFile ({url: url, filePath: filePath, name: 'uploadfile', header: {'content-type': 'multipart/form-data '}, // set the request header formData: {'shopid': wx. getStorageSync ('shopid')}, // other form data success: function (res) {wx. showToast ({title: "image modified successfully", icon: 'success', duration: 700}) }, fail: function (res ){}})},

Summary

The above section describes how to upload images to the server instance code through a mini-app. I hope it will be helpful to you. If you have any questions, please leave a message and I will reply to you in a timely manner. Thank you very much for your support for the help House website!