小程序上传图片和视频提交到服务器
在wxml里写好要提交的图片/视频的字段名(这里通过JS里转换为字符串在通过隐藏的input来提交)
<!-- 课程封面 -->
<view class='in-demand bor-b'>
<view class='dema-title'>
<text>课程封面:</text>
</view>
<view class='demand-col demand-col2'>
<view class='up-img' bindtap='deteleImg' data-delcover='{{idx}}' wx:for="{{imgCover}}" wx:key wx:for-index="idx">
<image name='cover_course' src="{{URL}}/teacherimg/{{item}}"></image>
</view>
<view wx:if="{{imgCover.length<1}}" class='up-img' bindtap='coverCourse' src='/images/addimg.png'>
<image src='/images/addimg.png'></image>
<input name="cover" style='display:none' value='{{coverImgstr}}'></input>
</view>
</view>
</view>
JS里 data对象里添加
imgCourse: [], //课程详情
imgCover: [], //封面
tempFilePaths: [],
imgCourseStr: '',
coverImgstr: '',
事件和方法:注释已经写得很清楚。 提交的时候 字段就填拼接后的coverImgstr 参数就行了
// 选择课程详情照片
courseDetail: function(e) {
let field = e.currentTarget.dataset.field;
let that = this
let fn = function(path) {//传入path参数 参数接收的是uploadImg成功后success(res.data)返回的参数
console.log(path, 'sssssssssss')
that.data.imgCourse.push(path)//把返回的path全部添加到imgCourse数组里
console.log(that.data.imgCourse, 'sssssssssss')
that.setData({
imgCourse: that.data.imgCourse,
imgCourseStr: that.data.imgCourse.join(',')//把imgCourse数组拼接为字符串方便给后台传输
})
}
this.uploadImg().then(fn)//提交事件处理完 后执行fn函数
},
// // 选择封面照片
coverCourse: function(e) {
let field = e.currentTarget.dataset.field;
let that = this
let fn = function(path) {
console.log(path, 'sssssssssss')
that.data.imgCover.push(path)//
console.log(that.data.imgCover, 'sssssssssss')
that.setData({
imgCover: that.data.imgCover,
coverImgstr: that.data.imgCover.join(',')
})
}
this.uploadImg().then(fn)
},
uploadImg() {
return new Promise((success, error) => {
var that = this;
wx.chooseImage({
count: 1, // 默认9
sizeType: ['original', 'compressed'], // 可以指定是原图还是压缩图,默认二者都有
sourceType: ['album', 'camera'], // 可以指定来源是相册还是相机,默认二者都有
success: function(res) {
// 返回选定照片的本地文件路径列表,tempFilePath可以作为img标签的src属性显示图片
wx.uploadFile({
url: CONFIG.API_URL.t_img,
filePath: res.tempFilePaths[0],
name: 'img',
success(res) {
success(res.data)
}
})
}
})
})
},
// 删除照片
deteleImg: function(e) {
let delcourse = e.currentTarget.dataset.delcoures;
let delcover = e.currentTarget.dataset.delcover;
this.data.imgCover.splice(delcover, 1); //删除封面
this.data.imgCourse.splice(delcourse, 1); //删除课程详情
this.setData({
imgCourse: this.data.imgCourse,
imgCover: this.data.imgCover,
})
},

浙公网安备 33010602011771号