前端上传图片、视频等记录

最新推荐文章于 2024-05-07 17:12:55 发布

蓄扬

最新推荐文章于 2024-05-07 17:12:55 发布

阅读量200

点赞数 3

文章标签：前端 vue.js javascript

本文链接：https://blog.csdn.net/sinat_20983055/article/details/136041825

版权

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"
				})
			}	
		}
	});
},