微信小程序上传图片

  • • 发表于 2年前
  • • 作者 JackLi
  • • 5073 次浏览
  • • 24 条评论
  • • 最后编辑时间 2年前
  • • 来自 [技 术]

原创声明:本文为作者原创,未经允许不得转载,经授权转载需注明作者和出处

好久没写文了, 终于闲下来写篇文章。 为什么要写小程序上传图片, 因为今天我运行以前写的程序图片竟然TM都不显示了。 看了好几遍文档没什么改变, 到底是哪里的问题。

这是官方文档的解释

tempFilePath是什么 他其实是个临时路径 这种形式 wxFile://tmp_613199421o6zAJs479YJ_PuHvzr__F4NaIF8U1480576019360.JPG

当你src=tempFilePath的时候, 图片无动于衷(以前这种是OK的), 后来就想上传到服务器试试, 果不其然, 上传到服务器可以正常显示。

====================================================================
代码很简单:
wxml

 <view>
      <view>
        <image src="{{imagePath}}"></image>
        <image src="http://localhost/upload/{{imagePath}}"></image>
      </view>
      <view>
        <button bindtap="selectImage">选择图片</button>
      </view>
    </view>

js

var app = getApp()

Page({
  data: {
    imagePath: ""
  },

  onLoad: function () {
  },

  selectImage: function() {
    var that = this;
    wx.chooseImage({
      success: function(res) {
        var tempFilePaths = res.tempFilePaths
        wx.uploadFile({
          url: "http://localhost/upload", // 你的接口地址
          filePath: tempFilePaths[0],
          name: "image",
          formData:{
            //'user': 'test'
          },
          success: function(res){
            var data = res.data
            that.setData({imagePath: data})
          }
        })
      }
    })
  }
})

后台

public void index() {
UploadFile uploadFile = getFile("image");
        renderJson(uploadFile.getFileName());
    }

```

注意:
本地调试需要勾选这个东西

小问题

因为不是表单, 没有multipart/form-data, 所以会报这个错误。 暂时还没想到怎么搞他
知道的可以说说

分享到:
评论区(共24条评论)
24条评论
Ctrl+Enter
作者

JackLi

JackLi

APP:1 帖子:23 回复:64 积分:1167

已加入社区[654]天

越过山丘,才发现无人等候

作者详情》
Top