您现在的位置是:首页 >技术交流 >vue-upload上传图片详细使用(文档服务器)网站首页技术交流
vue-upload上传图片详细使用(文档服务器)
简介vue-upload上传图片详细使用(文档服务器)
前言
-
实际开发中我们的图片,文件,PDF我们都应该存在文档服务器当中。从而优化代码,减少代码文件大小。
-
我们可以让后端把文档服务器搭建好,写好相应的存储接口api,我们就可以使用Upload组件上传。
-
但是我们需要注意的是,在实际开发中。在请求拦截中设置的token,和userid(用户id)要重新设置一次。
-
因为我们是使用upload组件直接上传,并没有经过axios,拦截不到。要在headers(请求头中设置2个参数)
代码实现
1.在添加表单中使用upload组件(饿了吗)
<el-form-item label="维保打印记录:" prop="fileList">
<!-- <el-input v-model="form.mcRecord" style="width: 350px"></el-input> -->
<!-- list-type="picture" 上传图片的样式 -->
<el-upload
class="upload-demo"
:action="upload.url"
:on-preview="handlePreview"
:headers="upload.headers"
:on-remove="handleRemove"
:on-success="handleFileSuccess"
:file-list="fileList"
list-type="picture"
:limit="10"
:on-exceed="handleExceed"
>
<el-button size="small" type="primary">点击上传</el-button>
<div slot="tip" class="el-upload__tip">
只能上传jpg/png文件,且不超过500kb
</div>
</el-upload>
</el-form-item>
2.在data中设置参数
2.1fileList是上传成功图片存储地方,是一个数组对象,我是直接转换成数组字符串存在后端。
2.2url是当前连接的后端地址加上api地址
2.3headers是upload属性,添加api请求头中的token和tenant-id(用户id)来验证身份。
2.4getToken,getTenantId,是在utils中的方法,获取token和用户id的。
// 上传图片成功之后存储地方
fileList: [],
// 图片上传地址,和请求头数据
upload: {
// 设置上传的请求头部
headers: { token: getToken(), "tenant-id": getTenantId() },
// 上传的地址
url: process.env.VUE_APP_BASE_API + "/media/upload/coursefile",
},
3.methods中的方法
为了方便查看,在点击已经上传成功文件时,会动态的使用js在document创建一个img来展示图片,方便查看。
// 文件上传成功钩子
handleFileSuccess(response, file, fileList) {
console.log("response", response);
console.log("file", file);
console.log("fileList", fileList);
let x = {};
x.name = response.filename;
x.url = response.url;
x.id = response.id;
console.log("上传图片", x);
this.fileList.push(x);
},
// 点击已上传文件右上角删除钩子
handleRemove(file, fileList) {
// console.log("id", file.id);
console.log("删除之后", fileList);
// const x = this.fileList.findIndex((v) => v.id == file.id);
// console.log("删除下标", x);
// this.fileList.splice(x, 1);
this.fileList = fileList;
console.log("处理过数据", this.fileList);
},
// 文件上传数量超过设置数量
handleExceed(files, fileList) {
this.$message.warning(`最多只能选择10张图片${fileList.length} 个文件`);
},
// 点击文件列表中已上传的文件时的钩子
handlePreview(file) {
console.log(file);
const image = new Image();
image.src = file.url;
image.onload = () => {
// 创建弹出层
console.log("执行了");
const previewContainer = document.createElement("div");
previewContainer.style.position = "fixed";
previewContainer.style.top = 0;
previewContainer.style.bottom = 0;
previewContainer.style.left = 0;
previewContainer.style.right = 0;
previewContainer.style.zIndex = 99999;
previewContainer.style.backgroundColor = "rgba(0,0,0,0.8)";
previewContainer.style.display = "flex";
previewContainer.style.justifyContent = "center";
previewContainer.style.alignItems = "center";
document.body.appendChild(previewContainer);
// 在弹出层中添加图片
const previewImage = document.createElement("img");
previewImage.src = file.url;
previewImage.style.maxWidth = "80%";
previewImage.style.maxHeight = "80%";
previewContainer.appendChild(previewImage);
// 点击弹出层,关闭预览
previewContainer.addEventListener("click", () => {
document.body.removeChild(previewContainer);
});
};
},
注意:
直接复制需要根据实际情况更改url(api接口路径),headers中请求头携带的参数(以request.js文件为准)。
总结:
经过这一趟流程下来相信你也对 vue-upload上传图片详细使用(文档服务器) 有了初步的深刻印象,但在实际开发中我 们遇到的情况肯定是不一样的,所以我们要理解它的原理,万变不离其宗。加油,打工人!
什么不足的地方请大家指出谢谢 -- 風过无痕
风语者!平时喜欢研究各种技术,目前在从事后端开发工作,热爱生活、热爱工作。