tp5小程上传图片

网页页面:

<view class="title">请选择要反馈的问题</view>

<view>
  <picker bindchange="bindPickerChange" value="{{index}}" range="{{array}}">
    <view>{{array[index]}}</view>
  <image src='../../image/ic_down.svg' class='picker_icon'></image>
  </picker>
</view>
<textarea placeholder="请输入您的意见或建议" name="textarea" bindinput="feedbackInput"/>

<view class="title">图片添加</view>

<view class='uploadImg'>
  <view wx:for="{{image}}" wx:key='feedbackImg'>
    <image src='{{image[index]}}'></image>
    <button bindtap='delectImg' data-num='{{index}}'>删除</button>
  </view>

  <image src='../../image/ic_add_pic.svg' bindtap='uploadImg' class='addimg' style='display:{{img_button}}'></image>
</view>
<button class="submit" type="{{button_status}}" bindtap="Submit"> 提交 </button>
 

   

     index.js 

var app = getApp();
Page({
  data: {
    array: ['程序', '软件', '业务'],
    index:0,
    msg:'',
    button_status: 'default',
    image:[],
    img_button:'inline-block',
  },

  bindPickerChange: function (e) {
    this.setData({ 
      index: e.detail.value 
    });
  },

  Submit: function (e) {
    if(this.data.msg.length != 0){
      var that=this;
      wx.showModal({
        title: '提示',
        content: '是否确认提交?',
        success: function (res) {
          if (res.confirm) {
            wx.request({
              url: app.appUrl.url + 'advise/uid/' + app.appData.userid + '/type/' + that.data.array[that.data.index] + '/content/' + that.data.msg,//+pic=图片地址1,图片地址2,图片地址3此处读取图片隐藏域的图片地址,多张用逗号分隔
              header: {
                "Content-Type": "applciation/json"
              },
              method: "POST",
              success: function (res) { },
              fail: function (err) { },
              complete: function (res) {
                wx.showToast({
                  title: '提交成功',
                  image: '/image/right.png',
                  duration: 3000
                })
                setTimeout(function () {
                  wx.clearStorage()
                  wx.navigateBack({
                    delta: 1
                  })
                }, 2000);
              },
            })
          }
        },
      })
    }
  },

  feedbackInput: function (event) {
    console.log(event.detail.value.length);
    if (event.detail.value.length==0){
      this.setData({
        button_status: 'default',
      });  
    }
    else{
      this.setData({
        button_status: 'primary',
      });  
    }
    this.setData({
      msg: event.detail.value,
    });
  },

  uploadImg:function(){
    var that = this, image = this.data.image;
    if(this.data.image.length<3){
      wx.chooseImage({
        count: 1, // 默认9
        sizeType: ['original', 'compressed'], // 可以指定是原图还是压缩图,默认二者都有
        sourceType: ['album', 'camera'], // 可以指定来源是相册还是相机,默认二者都有
        success: function (res) {
          wx.uploadFile({
            url: app.appUrl.url + 'upload',//这个方法就是后台处理上传的方法
            filePath: res.tempFilePaths[0], //获取到上传的图片
            name: 'file',
            success: function (info) {
              console.log(info);//info.data就是上传成功的图片名称 您可以在wxml里面搞一个隐藏域存储起来,在上面Submit提交里拼装一块提交出去
            }
          })
        },
        complete: function (res) {
          // 返回选定照片的本地文件路径列表,tempFilePath可以作为img标签的src属性显示图片
          if (that.data.image.length==2){
            that.setData({
              img_button: 'none',
            })
          }
          image.push(res.tempFilePaths);
          that.setData({
            image: image,
          })
        }
      })
    }
    
  },

  delectImg:function(e){
    var image = this.data.image;
    image.splice(e.currentTarget.dataset.num,1);
    this.setData({
      image: image,
      img_button: 'inline-block',
    })
  },
})

thinkphp5接受处理

复制代码
    //图片上传
    public function upload(){
        $file = request()->file('file');
        $info = $file->move(ROOT_PATH . 'public' . DS . 'uploads/images');
        if($info){
            echo $info->getSaveName();
            die();
        }else{
            echo $file->getError();
            die();
        }
    }


### Vue2 中实现文件上传并预览图片的方法 在 Vue2 开发环境中,可以通过多种方式实现文件上传以及图片预览功能。以下是基于 `Element UI` 和自定义逻辑的一种常见解决方案。 #### 1. 使用 Element UI 的 el-upload 组件 `el-upload` 是一个强大的文件上传组件,支持自定义上传行为、限制文件大小和类型等功能。为了实现图片预览,在绑定的回调函数中可以获取到已选中的文件对象,并将其转换为 Base64 格式的字符串用于显示[^1]。 ```html <template> <div> <!-- 文件上传 --> <el-upload action="https://jsonplaceholder.typicode.com/posts/" :on-change="handleChange" :auto-upload="false"> <el-button slot="trigger" type="primary">选取文件</el-button> </el-upload> <!-- 预览区域 --> <img v-if="imageUrl" :src="imageUrl" alt="Preview Image" style="width: 150px; margin-top: 20px;"> </div> </template> ``` #### 2. 转换文件为 Base64 并设置给 img 标签 当用户选择文件时触发 `onChange` 回调函数,该函数接收三个参数:当前文件 (`file`)、文件列表 (`fileList`) 和其他上下文信息。通过 FileReader API 将文件读取为 Data URL (Base64),随后赋值给 `<img>` 元素的 `src` 属性以完成预览。 ```javascript <script> export default { data() { return { imageUrl: '', // 存储图片路径 }; }, methods: { handleChange(file, fileList) { const isImage = file.raw.type.startsWith('image/'); // 判断是否为图片 if (!isImage) { this.$message.error('仅允许上传图片'); return; } // 创建 File Reader 对象 let reader = new FileReader(); reader.onload = (event) => { this.imageUrl = event.target.result; // 设置图片路径 }; // 将文件转成 base64 reader.readAsDataURL(file.raw); } } }; </script> ``` #### 3. 自定义样式与优化体验 可以根据业务需求进一步调整界面布局,比如增加删除按钮以便移除已选中的文件;或者集成进度条展示上传状态等附加特性[^4]。 --- ### 注意事项 - **兼容性**:确保目标浏览器支持 HTML5 的 File API。 - **安全性**:客户端验证只是初步措施,服务器端仍需严格校验接收到的数据合法性。 - **性能考量**:对于大尺寸图像可能会影响加载速度,建议压缩后再传输至服务端[^3]。 ---
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值