写一段Vue文件上传代码
时间: 2023-03-14 09:40:16 浏览: 53
以下是一段示例Vue文件上传代码:<template>
<div>
<input type="file" @change="handleFileUpload" />
</div>
</template><script>
export default {
methods: {
handleFileUpload(e) {
const file = e.target.files[0];
const formData = new FormData();
formData.append('file', file);
axios
.post('/upload', formData, {
headers: {
'Content-Type': 'multipart/form-data'
}
})
.then(response => {
console.log(response.data);
})
.catch(error => {
console.log(error);
});
}
}
};
</script>
相关问题
vue+elementui 写一段文件上传
好的,以下是一个简单的文件上传组件的 Vue 代码,使用了 ElementUI 的 Upload 组件:
```html
<template>
<div>
<el-upload
class="upload-demo"
action="/your/upload/url"
:on-success="handleSuccess"
:before-upload="beforeUpload"
>
<el-button size="small" type="primary">点击上传</el-button>
<div slot="tip" class="el-upload__tip">只能上传jpg/png文件,且不超过500kb</div>
</el-upload>
</div>
</template>
<script>
export default {
methods: {
handleSuccess(response, file, fileList) {
// 上传成功后的处理
console.log(response, file, fileList);
},
beforeUpload(file) {
// 上传前的验证
const isJPG = file.type === 'image/jpeg' || file.type === 'image/png';
const isLt500K = file.size / 1024 < 500;
if (!isJPG) {
this.$message.error('上传图片只能是 JPG/PNG 格式!');
}
if (!isLt500K) {
this.$message.error('上传图片大小不能超过 500KB!');
}
return isJPG && isLt500K;
},
},
};
</script>
```
注意替换 `action` 为你的上传接口地址。同时,你需要在后端实现文件接收和存储功能。
写一段Vue-simple-uploader上传视频到服务器代码
好的,以下是Vue-simple-uploader上传视频到服务器的代码示例:
```html
<template>
<div>
<vue-simple-uploader ref="uploader" :options="options"></vue-simple-uploader>
<button @click="uploadVideo">上传视频</button>
</div>
</template>
<script>
import VueSimpleUploader from 'vue-simple-uploader'
import axios from 'axios'
export default {
components: {
VueSimpleUploader
},
data() {
return {
options: {
target: 'http://example.com/upload', // 上传地址
accept: 'video/*', // 接受文件类型
fieldName: 'file', // 文件字段名
multiple: false, // 是否允许多选
autoUpload: false // 是否自动上传
}
}
},
methods: {
// 手动上传视频文件
uploadVideo() {
const uploader = this.$refs.uploader
const files = uploader.getFiles()
if (files.length === 0) {
alert('请选择视频文件')
return
}
const formData = new FormData()
formData.append(this.options.fieldName, files[0])
axios.post(this.options.target, formData).then(response => {
console.log('上传成功:', response.data)
}).catch(error => {
console.error('上传失败:', error)
})
}
}
}
</script>
```
此代码使用了Vue-simple-uploader插件,通过ref引用插件组件,设定上传文件的地址、文件类型、字段名等属性,并手动上传单个视频文件。当然,为了实现该功能,服务器端也需要使用对应的技术栈进行处理。
相关推荐
![pdf](https://img-home.csdnimg.cn/images/20210720083512.png)
![pdf](https://img-home.csdnimg.cn/images/20210720083512.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)