小程序附件上传并且名称回显

2022-03-10 约 496 字预计阅读 1 分钟

https://bing.ee123.net/img/rand?artid=123404216

小程序附件上传并且名称回显

1-先看样式，一块样式用到 Vant Weapp 感觉挺不错的一个框架就是功能少了一点
附上地址框架地址:

2-wxml

<view>
  <input type="text" value="附件名称:{{username}}" bindtap="choImg" />
  <van-button type="primary" bindtap="loadimg">确定上传</van-button>
</view>

2- js 这个 input 点击上传的附件的信息而且得到附件名称的回显

Page({

  /**
   * 页面的初始数据
   */
  data: {
    username:'点击上传附件',
    usernameUrl:'',
},
  
choImg: function () {
    var thiss=this
    wx.chooseMessageFile({
      count: 1,
      type: 'file',
      success(res){
           const tempFilePaths =res.tempFilePaths
           thiss.setData({
            username: res.tempFiles[0].name,
            usernameUrl:res.tempFiles[0].path
          })      
           console.log('选择',res) 
      }
    })
 },

3- js 确定按钮上传的方式这一块是用到java 后端mongoDB服务器接收的

 loadimg: function () {
  var _this = this;
  console.log( _this.tempFiles);
  wx.uploadFile({
    url: 'http://localhost:8080/file/uploadFile', //接口
    filePath: _this.data.usernameUrl,
    name: 'file',
    success: function (res) {
      var data = res.data;
      wx.showToast({
        title: '操作成功！', // 标题
        icon: 'success',  // 图标类型，默认success
        duration: 1500  // 提示窗停留时间，默认1500ms
      })
    },
    fail: function (error) {
      wx.showToast({
        title: '操作失败！', // 标题
        icon: 'success',  // 图标类型，默认success
        duration: 1500  // 提示窗停留时间，默认1500ms
      })
      console.log(error);
    }
  })
},

4-看下上传的东西的成果这一快就是用到分页查询了上传附件并且名称回显就完成了

目录

小程序附件上传并且名称回显

小程序附件上传并且名称回显