<uni-section title="图片上传" type="line">
<view class="example">
<view class="example-body">
<uni-file-picker limit="9" v-model="imageValue" mode="grid" file-mediatype="image" :auto-upload="false" @select="selectImage">
</uni-file-picker>
</view>
</view>
</uni-section>
methods: {
async selectImage(e) {
var that = this;
// console.log("选择图片:" + e.tempFilePaths);
// 循环所有选择的图片
for (let i = 0; i < e.tempFilePaths.length; i++) {
console.log("选择图片:" + e.tempFilePaths.length);
await that.uploadImg(e.tempFilePaths[i]);
}
},
async uploadImg(tempFilePath) {
var that = this;
if (!tempFilePath) return;
that.imageValue.push({
url: tempFilePath,
name: ""
});
const [err, {
data
}] = await uni.uploadFile({
url: app.globalData.rqurl + '/InvoicingWeb/InvoicingController.aspx?method=getPictures',
filePath: tempFilePath,
name: 'file',
formData: {
'file_name': that.imageValue.length + ".jpg"
},
header: {
"Content-Type": "multipart/form-data",
"Content-Disposition": "form-data"
}
});
console.log("err", err)
console.log("data:" + data);
if (!that.isGuid(data)) {
// upload fail
that.imageValue.pop()
uni.showToast({
title: "上传失败",
icon: "none"
})
} else {
// upload success
that.imageValue[that.imageValue.length - 1].name = data
}
},
isGuid(str) {
return /^[0-9a-f]{8}-[0-9a-f]{4}-[1-5][0-9a-f]{3}-[89ab][0-9a-f]{3}-[0-9a-f]{12}$/i.test(str);
},
public string getPictures()
{
Result rs = new Result();
var postfiles = Request.Files;
if (postfiles.Count <= 0)
{
rs.isok = false;
rs.remark = "请选择图片";
return JObject.FromObject(rs).ToString();
}
string path = Server.MapPath("~/uploadFile/image/");
if (!Directory.Exists(path))
{
Directory.CreateDirectory(path);
}
// 循环所有上传的文件
for (int i = 0; i < postfiles.Count; i++)
{
var postfile = postfiles[i];
if (postfile == null || postfile.ContentLength <= 0)
{
continue;
}
string fileName = Path.GetFileName(postfile.FileName);
string saveName = Guid.NewGuid().ToString() + Path.GetExtension(fileName);
string savePath = Path.Combine(path, saveName);
postfile.SaveAs(savePath);
}
rs.isok = true;
rs.obj = "上传成功";
return JObject.FromObject(rs).ToString();
}
这是目前的代码,目前是选择了多张图片,但是到后面保存的时候只保存了一张,比如选了三张,只保存了一张。
需求是,选择了图片上传成功后再回显图片,然后保存了表单之后,重新进入页面从数据库读取显示图片,是需要用到这个手动上传this.$refs.files.upload()这个方法吗,目前是一选择就直接显示了