请看下面的重构后的代码:
```html
```
```js
Page({
data: {
imglist: [], // 存储图片的数组
},
checkimg() {
wx.chooseImage({
count: 1, // 默认9
sizeType: ['original', 'compressed'], // 可以指定是原图还是压缩图,默认二者都有
sourceType: ['album', 'camera'], // 可以指定来源是相册还是相机,默认二者都有
success(res) {
// tempFilePath可以作为img标签的src属性显示图片地址
const tempFilePaths = res.tempFilePaths;
this.setData({
imglist: tempFilePaths, // 将选择的图片路径存储到数据中供后续使用
});
},
});
},
ylimg(e) {
// 点击图片预览时触发的事件,将选中的图片路径设置为预览图片的src属性值
e.currentTarget.dataset.src = e.currentTarget.dataset.src; // 将当前点击的图片路径设置为预览图片的src属性值
wx.previewImage({
urls: [e.currentTarget.dataset.src], // 需要预览的图片url数组,这里只有一个元素,即当前点击的图片路径
devMode: false, // 如果真包含本地文件路径,必须设为false才生效(否则会出现“this is not a URL”错误)
})
.then((res) => {
console.log('success', res); // 如:ok, http://localhost/images/a.png (你也可以不处理这个)
})
.catch((err) => {
console.error('fail', err); // 如:error, http://localhost/images/a.png (你也可以不处理这个)
});
},
bindFormSubmit() {
// 当表单提交时触发的事件,用于将问题内容和图片上传到后台服务器上进行处理
wx.request({
url: 'https://example.com/yourserver/upload.php', // 你自己的服务器地址和上传接口地址,注意替换掉这里的url和method参数值
method: 'POST', // POST请求方法,根据你的实际情况修改这里的value参数值即可
Headers: { 'Content-Type': 'application/json' }, // 注意添加请求头信息,这里需要设置Content-Type为application/json格式,根据你的实际情况修改这里的value参数值即可。如果不需要设置请求头信息,可以省略这行代码。
data: JSON.stringify({ // 将问题内容和图片路径封装成一个JSON字符串对象,然后传递给后台服务器上处理的方法进行接收和解析。注意根据你的实际情况修改这里的value参数值即可。如果不需要传递额外的数据,可以省略这行代码。
'content': this.data.content[0].value, // 将问题内容赋值给后台服务器上处理的方法进行接收和解析。注意根据你的实际情况修改这里的value参数值即可。如果不需要传递额外的数据,可以省略这行代码。此处假设问题内容是一个文本框的值。如果问题内容不是文本框的值,可以根据实际情况修改此处的取值方式。另外要注意的是,由于这里使用了JSON.stringify方法将数据转换为JSON字符串形式传递给后台服务器上处理的方法进行接收和解析,因此在后台服务器上处理方法中需要使用JSON.parse方法将接收到的数据转换回原始对象或数组格式才能使用。如果后台服务器上处理方法不支持直接接收JSON字符串形式的数据或者无法正确解析JSON字符串形式的数据,那么你需要根据实际情况对后台服务器上处理方法进行相应的修改和调整。如果后台服务器上处理方法支持直接接收原始对象或数组格式的数据,那么你可以省略这行代码中的JSON.stringify方法调用和data属性的赋值操作。另外要注意的是,由于这里使用了wx.request方法发送了POST请求并携带了JSON格式的请求体数据,因此在实际开发中可能需要根据具体需求对请求方式、请求头信息、请求参数等进行更加详细的配置和调整。
重构后的内容如下:
```javascript
data: {
imglist: []
},
/**
* form提交事件
*/
bindFormSubmit: function (e) {
const self = this;
// 提问内容
const content = e.detail.value.content;
if (content === '') {
wx.showToast({
title: '内容不能为空',
icon: 'loading',
duration: 1000,
mask: true,
});
} else {
wx.showLoading({
title: '正在提交...',
mask: true,
});
// 添加问题
wx.request({
url: 'https://xxxxxxxxxx/index.PHP?g=user&m=center&a=createwt',
data: {
content: content,
},
method: 'GET', // OPTIONS, GET, HEAD, POST, PUT, DELETE, TRACE, CONNECT
header: app.globalData.header, // 设置请求的 header
success: function (res) {
// success
if (typeof (res.data) == 'number') {
if (imglist !== '') {
// 开始插入图片
for (var i = 0; i < imglist.length; i++) {
// 上传至服务器
wx.uploadFile({
url: 'https://xxxxxxxx/index.php?g=user&m=center&a=upload', //仅为示例,非真实的接口地址
filePath: imglist[i],
name: 'files',
formData: {
'wtid': res.data,
},
header: app.globalData.header,
success: function (res) {
if (i >= imglist.length) {
self.setData({
imglist: [],
});
wx.hideLoading();
wx.showToast({
title: '提问成功',
icon: 'success',
duration: 2000,
mask: true,
});
wx.navigateBack({
delta: 1,
});
}
},
});
}
console.log(imglist);
} else {
wx.hideLoading();
wx.showToast({
title: '提问成功',
icon: 'success',
duration: 2000,
mask: true,
});
wx.navigateBack({
delta: 1,
});
}
} else {
wx.hideLoading();
wx.showToast({
title: res.data,
icon: 'loading',
duration: 1000,
mask: true,
});
}
},
fail: function (res) {
self.onLoad();
},
});
}
}, // 点击选择图片 checkimg() {}, //点击预览图片 ylimg(e) {}, onLoad() {}, setData() {}, getApp() {}
在PHP后台代码中,有一个名为`upload`的函数用于实现图片上传功能。以下是对该函数的重构:
```php
// 图片上传
public function upload() {
if (IS_POST) {
$upload = new \Think\Upload(); // 实例化上传类
$upload->maxSize = 3145728; // 设置附件上传大小
$upload->exts = array('jpg', 'gif', 'png', 'jpeg'); // 设置附件上传类型
$upload->rootPath = './Uploads/'; // 设置附件上传根目录
$upload->savePath = ''; // 设置附件上传(子)目录
// 上传文件
$info = $upload->upload();
if (!$info) { // 上传错误提示错误信息
$this->error($upload->getError());
} else { // 上传成功,获取上传文件信息并插入到数据库中
// 获取上传文件信息并插入到数据库中的逻辑
}
}
}
```
感谢阅读,希望对您有所帮助!如果您还有其他问题或需要帮助,请随时支持本站,谢谢!