前端如何利用接口上传文件到服务器
dearweb
发布：2021-09-30 11:05:40阅读：
目前越来越多的场景需要前端直接将文件通过接口上传到服务器保存，但是还是有不少小伙伴不懂其中的奥妙，本文主要介绍一下前端是如何对文件进行上传的。
一般上传文件的做法
主要介绍使用input标签file属性进行上传文件的方法。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Document</title>
如果不引入则不能使用ajax
<script src="引入jquery"></script>
</head>
<body>
<input type="file" id="file" name="file" onchange="changeFn()" />
<script>
function changeFn() {
// 获取选中文件
let file = document.getElementById('file').files[0]
let formdata = new FormData()
formdata.append('file', file, file.name)
// 执行ajax
$.ajax({
url: 'load.php', // 接口地址 后台文件，绝对路径相对路径都可以，但写绝对路径要注意可能出现的跨域问题，
data: formdata,
processData: false, //必须
contentType: false, //必须
async: false, //必须
type: 'post', // 请求方法
success: function (msg) {
console.log(msg)
},
error: function (xhr, status, error) {
console.log(xhr)
console.log(status)
console.log(error)
},
})
}
</script>
</body>
</html>上述所描述的就是利用ajax去实现图片文件的上传。
下面再给搭建介绍一下利用elementUI中upload方法实现接口文件上传。
<el-upload class="upload-demo" ref="uploadBoxs" action="" // 必须为空 :headers="tokenStr" // token值， :on-change="handlePreviewUser" :auto-upload="false" // 必须填写，让文件可手动控制 >
js里面的代码
handlePreviewUser(file) {
// console.log(file.raw)
this.importUserFile = file.raw // 将获取的文件存进变量里面
this.importUserAndOrganization(file.raw)
},发送请求将文件上传到服务器
importUserAndOrganization(file) {
let data = new FormData()
if (!file) {
this.$message.error('请选择上传文件')
return
}
data.append('file', file, file.name)
// 文件上传的方法
importUserAndOrganization(this.importUser, data)
.then(res => {
//文件上传成功的返回
console.log(res)
})
.catch(err => {
//文件上传异常的返回
})
}本文给大家介绍了利用ajax上传文件图片以及使用vue+elementUI的方法实现图片文件上传，你看懂了吗？
小礼物走一波，支持作者
赏还没有人赞赏，支持一波吧
