html

<l-form name="goods" l-form-btn-class="l-form-btn-class" bind:linsubmit="submit"
>
<l-form-item label="商品分类:"rules="{{goods.goods_type}}" name="goods_type">
<l-input id="goods_type" hide-label show-row="{{false}}"/>
</l-form-item> <l-form-item label="商品属性:" roles="{{goods.goods_attr}}" name="goods_attr">
<l-input id="goods_attr" hide-label show-row="{{false}}"/>
</l-form-item> <l-form-item label="标题:" name="goods_name" roles="{{goods.goods_name}}">
<l-input id="goods_name" hide-label show-row="{{false}}"/>
</l-form-item> <l-form-item label="商品描述:" name="desc" roles="{{goods_name}}">
<l-textarea border="{{false}}" roles="{{desc}}" id="desc" value="{{desc}}" />
</l-form-item>
<l-image-picker size="4" bind:linchange="onChangeTap" />
<view slot="submit">
<l-button>提交</l-button>
<iew>
<view slot="reset">
<l-button type="default" plain>重置</l-button>
<view>
</l-form>
js

  Page({

  /**
   * 页面的初始数据
   */
  data: {
    TimeID: -1,
    goods_img:[],
    goods:{
      goods_type:{
        required: true,
        message: '分类不能为空',
        trigger: 'change'
      }
    }
    
   },

  onChangeTap(e){
    let that=this
    let token=wx.getStorageSync('token')
    e.detail.current.map(filePath=>{
      wx.uploadFile({
        filePath: filePath,
        name: 'file',
        // url: 'http://www.zy.com/api/upfile',
        url: `${http}upfile`,
        header:{token},
        success:res=>{
          let json=JSON.parse(res.data)
//文件追加数组
          this.data.goods_img.push(json.data)
          console.log(json.data);
        }
      })
    })
  },

  submit(event){
    console.log();
    if (!event.detail.isValidate) {
      return false
    }
      let desc=event.detail.desc
      let goods_attr=event.detail.values.goods_attr
      let goods_name=event.detail.values.goods_name
      let goods_type=event.detail.values.goods_type
      let goods_img=this.data.goods_img
      let token=wx.getStorageSync('token')
      wx.request({
        url: `${http}goods`,
        data:{desc,goods_attr,goods_name,goods_type,goods_img},
        method:"POST",
        header: {
          'content-type': 'application/json', // 默认值
          token
        },
        success:res=>{
          console.log(res);
          if (res.data.code == 200) {
            wx.showToast({
              title: '添加成功',
            })
          }else{
            wx.showToast({
              title: '添加失败',
            })
          }
        },
        fail:ret=>{
          wx.showToast({
            title: '系统错误',
          })
        }
      })
  },

laravel 控制器代码:

  public function upload(Request $request)
{
DB::beginTransaction();
$file = $request->file('file');
// 百度云检测图片
$res=(new BaiDuCkeck())->imageAudit($file);
try {
$res=Oss::oss($file);
DB::commit();
// 返回上传之阿里云oss的图片链接
return ['code'=>200,'msg'=>'ok','data'=>$res];
}catch (\Exception $exception){
DB::rollBack();
return ['code'=>500,'msg'=>$exception->getMessage(),'data'=>[]];
}

效果图:

方式2 :简单实现

wxml

<l-form name="goods" l-form-btn-class="l-form-btn-class" bind:linsubmit="submit"
>
<view>
<l-image-picker size="4" bind:linchange="onChangeTap" />
</view>
<view slot="submit">
<l-button>提交</l-button>
</view>
</l-form>

wx.json

{
"usingComponents": {
"l-image-picker":"/miniprogram_npm/lin-ui/image-picker",
"l-form":"/miniprogram_npm/lin-ui/form"
}
}

wx.js

// liu ui 图片上传
onChangeTap(evt) {
evt.detail.current.map(filePath => {
wx.uploadFile({
filePath: filePath,
name: 'file',
url: 'http://www.yan.com/exam20/image',
header: {
'Content-Type': 'multipart/form-data'
},
success: res => { let json = JSON.parse(res.data)
//文件追加数组
this.data.goods_img.push(json.data) } }) }); }, submit(evt) {
// 获取到文件传输的值
let goods_img=this.data.goods_img
// 将值添加入库即可 },

laravel控制器:

/**
* 接受微信小程序端传过来的图片
*/
public function image(Request $request){
$imgUrl=$request->file('file')->getPathname();
// 验证图片链接
$res=BaiduService::imageCheck($imgUrl);
if ($res){
// 阿里云文件上传
$result=OssImageServerice::ossImage($imgUrl);
return response()->json(['code'=>200,'message'=>'文件检测结果合规,文件已经上传至阿里云服务器','data'=>$result]);
}else{
return response()->json(['code'=>500,'message'=>'文件不合规,上传失败','data'=>'']);
} }

微信小程序文件上传结合lin ul的更多相关文章

  1. 微信小程序文件上传至七牛云(laravel7)

    1 wxml: <view> <form bindsubmit="dopost"> <view> <label>真实姓名</l ...

  2. 5行代码实现微信小程序图片上传与腾讯免费5G存储空间的使用

    本文介绍了如何在微信小程序开发中使用腾讯官方提供的云开发功能快速实现图片的上传与存储,以及介绍云开发的 5G 存储空间的基本使用方法,这将大大提高微信小程序的开发效率,同时也是微信小程序系列教程的视频 ...

  3. 快速高效实现微信小程序图片上传与腾讯免费5G存储空间的使用

    本文介绍了如何在微信小程序开发中使用腾讯官方提供的云开发功能快速实现图片的上传与存储,以及介绍云开发的 5G 存储空间的基本使用方法,这将大大提高微信小程序的开发效率 对于一般的图片上传功能开发,我们 ...

  4. 微信小程序图片上传并展示

    1.首先编写微信小程序的页面和样式: index.js var total = []; Page({ data: { perImgSrc: [] }, onLoad: function (option ...

  5. 小程序文件上传uploadFile

    前台代码: bindPhoto(e) { var that = this; wx.chooseImage({ count: 1, sizeType: ['original','compressed'] ...

  6. 微信小程序---图片上传+服务端接受

    原文地址:http://blog.csdn.net/sk719887916/article/details/54312573 微信小程序,图片上传,应用地方-修改用户信息的头像. 详细代码: 小程序的 ...

  7. 微信小程序图片上传和裁剪

    本篇博客用于解决微信小程序图片裁剪问题 图片裁剪常用于头像选择和图片合成等. 图片裁剪解决方案: 目前网络上知名的微信小程序图片裁剪插件是we-cropper(文末有链接) 操作步骤:下载好we-cr ...

  8. 微信小程序开发——上传代码片段到git仓库

    微信开发者工具除了自带的git版本管理(本地服务)之外,还可以推送到在线git仓库中去,这样别人也可以通过git来拉取你的代码片段或小程序. 一.1.登录git 一.2.点击创建项目  一.3.填写项 ...

  9. 微信小程序代码上传,审核发布小程序

    1.打开微信开发者工具 管理员扫码 -> 填写好小程序的项目目录.AppID(必须是客户已注册好的AppID).项目名称 2.在app.js中修改id(客户登录后台管理系统的id),app.js ...

随机推荐

  1. 【源码】Redis命令处理过程

    本文基于社区版Redis 4.0.8   1.命令解析 Redis服务器接收到的命令请求首先存储在客户端对象的querybuf输入缓冲区,然后解析命令请求的各个参数,并存储在客户端对象的argv和ar ...

  2. ARP数据包分析

    转载请注明来源:https://www.cnblogs.com/hookjc/ 本机IP:192.168.0.1 (c0 a8 00 01)本机MAC:00-50-56-c0-00-01目标IP:19 ...

  3. 第一个OC类

    1.如何声明一个类 格式 注意: 1.必须以@interface开头,@end结尾 2.成员变量的声明,必须写在@interface与@end之间的大括号中 3.方法的声明必须在{}下面,不能写在{} ...

  4. VScode git无法使用,Error: command 'git.push' not found 源代码管理无法使用的问题及解决方法

    正常条件下,只要电脑中安装了Git,VScode就可以直接使用. 在开始界面有下图所示的功能: 在源代码管理栏目中: 如果没能正常工作,就看不到这些功能. 可能在用某些与git相关的功能时,如安装了G ...

  5. Solution -「多校联训」消失的运算符

    \(\mathcal{Description}\)   Link.   给定长度为 \(n\) 的合法表达式序列 \(s\),其中数字仅有一位正数,运算符仅有 - 作为占位.求将其中恰好 \(k\) ...

  6. Solution -「多校联训」假人

    \(\mathcal{Description}\)   Link.   一种物品有 长度 和 权值 两种属性,现给定 \(n\) 组物品,第 \(i\) 组有 \(k_i\) 个,分别为 \((1,a ...

  7. Solution -「LOJ #141」回文子串 ||「模板」双向 PAM

    \(\mathcal{Description}\)   Link.   给定字符串 \(s\),处理 \(q\) 次操作: 在 \(s\) 前添加字符串: 在 \(s\) 后添加字符串: 求 \(s\ ...

  8. [LeetCode]1.Two Sum 两数之和(Java)

    原题地址:two-sum 题目描述: 给定一个整数数组 nums 和一个整数目标值 target,请你在该数组中找出 和为目标值 target  的那 两个 整数,并返回它们的数组下标. 你可以假设每 ...

  9. Linux性能优化之磁盘I/O性能指标

    讨论指标之前,得先解决两个概念:文件系统和磁盘I/O栈. 文件系统是什么?文件系统是在磁盘的基础上,提供了一个用来管理文件的树状结构.简言之,文件系统是树状结构,一种数据结构~逻辑上的概念.磁盘大家都 ...

  10. JVM学习——字节码(学习过程)

    JVM--字节码 为什么要学字节码 字节码文件,有什么用? JVM虚拟机的特点:一处编译,多处运行. 多处运行,靠的是.class 字节码文件. JVM本身,并不是跨平台的.Java之所以跨平台,是因 ...