vue:input------图片上传流程
1、 html代码
<input type="file" id="file-input" />
2、js代码
const fileInput = document.querySelector('input[type="file"]');
const formData = new FormData();
formData.append("file", fileInput.files[0]);
//formData为前端传后端参数
vue:elementui-plus上传插件上传流程
1、 html代码
<el-upload
class="avatar-uploader"
action="#"
:show-file-list="false"
:on-success="handleAvatarSuccess"
:http-request="uploadAction"
name="image"
>
<img v-if="useDialog.pictureForm.img_path" :src="baseURL+useDialog.pictureForm.img_path" class="avatar" />
<img v-else-if="imageUrl" :src="imageUrl" class="avatar" />
<el-icon v-else class="avatar-uploader-icon"><Plus /></el-icon>
</el-upload>
2、js代码
const handleAvatarSuccess = (response, uploadFile) => {
imageUrl.value = URL.createObjectURL(uploadFile.raw);
};
//上传action
const uploadAction = async (option) => {
const data = new FormData();
data.append("image", option.file);
let res = await upload(data);//后端接口
if (res.code === 200) {
uploadImg.value = res.data;
ElMessage({
message: "上传成功",
type: "success",
});
} else {
ElMessage({
message: "上传失败",
type: "error",
});
}
};
uniapp 上传流程
1、html代码
<view class="item">
<image class="itemImg" :src="videoPath" ></image>
<view class="text" @click="videoUpload">
上传
</view>
</view>
2、代码
//上传视频
videoUpload(){
var self = this;
uni.showLoading({
title: '加载中'
});
uni.chooseVideo({
sourceType: ['album'],
success: function (res) {
// console.log('save success',res);
self.apiUpload(res) //后端接口参数整理
}
});
},
//上传视频接口
apiUpload(res){
let self=this
uni.uploadFile({
url: '/api/upload/uploadMedia', //后端接口请求
filePath: res.tempFilePath,
name: 'files',
formData: {
"ring_name": res.name,
"ring_duration": res.duration.toFixed(2)
},
success: (info) => {
uni.hideLoading();
let newRes = JSON.parse(info.data)
if(newRes.code === 200){
uni.showToast({
title: newRes.message,
icon: "success"
})
}else{
uni.showToast({
title: newRes.message,
icon: "error"
})
}
}
});
},