已知晓本地文件的一个路径
如何通过这个本地文件的一个路径上传到服务器
例如:
file:///C:/Users/18155/AppData/Local/Temp/ksohtml/wpsC223.tmp.jpg
这个是我已知晓的文件路径,如何通过这个路径把文件通过后端提供的接口上传到服务器上
已知晓本地文件的一个路径
如何通过这个本地文件的一个路径上传到服务器
例如:
file:///C:/Users/18155/AppData/Local/Temp/ksohtml/wpsC223.tmp.jpg
这个是我已知晓的文件路径,如何通过这个路径把文件通过后端提供的接口上传到服务器上
这种上传一般都是需要用户选中对应文件上传的。选中后可以获取的文件的信息,再传递到后端接口进行处理,上传服务器。
如果你是用element-ui的upload
组件实现。
关键点:
也可以使用原生input
<input
type="file"
:value="imgFile"
ref="selectImg"
accept="image/png, image/jpeg, image/jpg"
@change="uploadImg($event)"
/>
在change事件里校验文件是否合法,若合法则调用后端接口进行上传。
解决方案可参考:
vue完整上传图片(阿里云OSS)
<!--这里展示大图-->
<div class="full_image" v-if="full_image">
<img :src="full_image" style="border-radius:3px">
<span style="position:absolute;right:10px;top:8px;font-size:16px;font-weight:400;cursor:pointer;user-select:none" @click="full_image=''">X</span>
</div>
<!--上传图片-->
<div >
<!--缩略图-->
<div v-if="images">
<img :src="image.url" v-for="(image,index) in images" :key="index" @click="showImage" :data-url="image.url+''" style="cursor:pointer;">
</div>
<!--上传图片-->
<div @click="uploadImage">
<div style="width:80px;height:80px">
<input type="file" ref="image_input" accept=".png,.jpg,.jpeg" @change="imageSelect" hidden>
<span>+</span><span>上传图片</span><span>({{images.length}}/6)</span>
</div>
</div>
</div>
<button @click="submit">提交</button>
// 这里使用阿里的oss上传图片,导入oss
import { ossTempAuth } from '@/api/oss'
import OSS from 'ali-oss';
data() {
return {
images: [],
full_image: '', // 当前放大图片base64码
files: [], // 图片File实例
image_urls: [], // 图片上传后返回url
};
},
// 点击图片div时触发input:click
uploadImage() {
this.$refs.image_input.dispatchEvent(new MouseEvent('click'));
},
// 点击缩略图时展示图片
showImage(event) {
this.full_image = event.target.dataset.url;
},
// uploadImage函数触发input的onclick事件,选择文件
imageSelect(event) {
// 判定文件列表
let file = event.target.files[0];
for (let i = 0; i < this.images.length; i++)
if (file.name == this.images[i].name) return;
// 新建文件实例
let ofReader = new FileReader();
// 读取文件流
ofReader.readAsDataURL(file);
// 转为base64码
ofReader.onload = evo => {
let base64 = evo.target.result;
// 将图片base64码放进去数组,以便能够实时预览
this.$set(this.images, this.images.length, { name: file.name, url: base64 });
this.files.push(file);
}
},
//按钮点击
submit(){
this.uploadFiles();
},
//准备上传
async uploadFiles() {
var self = this;
// 获取已经选择的文件流
var files = this.files;
var video = this.video_file;
// 获取秘钥信息
let authConfig = await ossTempAuth();
let back = authConfig.data;
// 实例化OSS
const client = await new OSS({
region: back.region,
accessKeyId: back.AccessKeyId,
accessKeySecret: back.AccessKeySecret,
bucket: back.bucket,
stsToken: back.SecurityToken,
});
// 上传图片
async function uploadImage() {
try {
for (let i = 0; i < files.length; i++) {
let name = files[i].name;
let index = name.lastIndexOf(".");
let ext = name.substr(index + 1);
const result = await client.put(
'hummingbird_v2/returns/pic/' + new Date().getTime() + self.uuid(10, 16) + i + '.' + ext,
files[i],
{
'Content-Encoding': 'UTF-8',
'Expires': 'Wed, 08 Jul 2030 16:57:01 GMT',
}
);
self.image_urls[i] = result.url;
}
} catch (e) {
this.model_upload = false;
console.log("上传图片失败", e);
}
}
// 调用上传
if (files.length > 0) uploadImage();
},
相关链接:
vue完整上传图片(阿里云OSS)
10 回答11k 阅读
6 回答3k 阅读
5 回答4.8k 阅读✓ 已解决
4 回答3k 阅读✓ 已解决
2 回答2.6k 阅读✓ 已解决
3 回答5.1k 阅读✓ 已解决
3 回答1.8k 阅读✓ 已解决
做不了,需要使用文件选择器<input type='file' />自己选择