不用脚手架,引入vue,上传文件实现代码?
要在不使用脚手架的情况下,引入 Vue 并实现上传文件的功能,可以按照以下步骤进行:
- 在 HTML 文件中引入 Vue 和 Axios 库:
<scriptsrc="https://cdn.jsdelivr.net/npm/[email protected]/dist/vue.js"></script><scriptsrc="https://cdn.jsdelivr.net/npm/axios/dist/axios.min.js"></script>
- 在 HTML 文件中定义 Vue 实例,并编写上传文件相关的代码:
<divid="app"><inputtype="file"@change="handleUpload"ref="fileInput"></div><script>newVue({el:'#app',methods:{handleUpload(){const formData =newFormData();const file =this.$refs.fileInput.files[0];
formData.append('file', file);
axios.post('/upload', formData).then(response=>{
console.log('上传成功');}).catch(error=>{
console.error('上传失败:', error);});}}});</script>
在上述示例中,我们首先在 HTML 文件中定义了一个包含一个文件上传 input 元素的 Vue 实例,在其中编写了一个
handleUpload
方法用于处理上传文件事件。
当用户选择文件后,我们通过
FormData
对象创建了一个新的表单数据对象,并将选择的文件添加到其中。然后,使用
axios.post
方法向服务器发送一个 POST 请求,请求的 URL 是
/upload
,此处需要根据实际情况进行修改。
当上传成功时,
.then
方法会被执行,并在控制台打印 ‘上传成功’;当上传失败时,
.catch
方法会被执行,并在控制台打印错误信息。
需要注意的是,在以上例子中,我们使用
ref
属性获取了 file input 元素的引用,并通过
this.$refs.fileInput.files[0]
获取了用户选择的文件。
多个不同文件呢?
可以修改
handleUpload
方法,用一个数组来保存用户选择的多个文件,并将每个文件都添加到 FormData 对象中,然后一次性向服务器发送所有文件。以下是一个示例:
<divid="app"><inputtype="file"@change="handleUpload"ref="fileInput"multiple></div><script>newVue({el:'#app',methods:{handleUpload(){const formData =newFormData();const files =this.$refs.fileInput.files;for(let i =0; i < files.length; i++){
formData.append('files[]', files[i]);}
axios.post('/upload', formData).then(response=>{
console.log('上传成功');}).catch(error=>{
console.error('上传失败:', error);});}}});</script>
在上述示例中,我们首先为 file input 元素设置了
multiple
属性,使得用户可以选择多个文件。然后,在
handleUpload
方法中,我们定义了一个空 FormData 对象和一个用于保存文件的空数组。
通过遍历选择的文件列表,并依次将每个文件添加到 FormData 对象中,并指定表单参数名为 ‘files[]’。这里需要注意的是,表单参数名需要以数组形式传递,即多个文件都会被作为同一个参数名的数组元素进行传递。
最后,我们使用
axios.post
方法向服务器发送一个 POST 请求,请求的 URL 是
/upload
,并把包含所有文件的 FormData 对象作为参数进行提交。
我还想把其中的图片预览
要预览上传的图片,可以在用户选择文件时,将图片的 Base64 编码存储到 Vue 实例中,并使用
URL.createObjectURL
生成一个预览链接保存在另一个数组中,最后在页面上渲染这些预览链接。以下是一个示例:
<divid="app"><inputtype="file"@change="handleUpload"ref="fileInput"multiple><divv-for="(url, index) in previewUrls":key="index"><img:src="url"width="200"></div></div><script>newVue({el:'#app',data(){return{files:[],previewUrls:[]};},methods:{handleUpload(){const formData =newFormData();const files =this.$refs.fileInput.files;for(let i =0; i < files.length; i++){
formData.append('files[]', files[i]);if(/^image\//.test(files[i].type)){const reader =newFileReader();
reader.readAsDataURL(files[i]);
reader.onload=()=>{this.previewUrls.push(reader.result);};}}
axios.post('/upload', formData).then(response=>{
console.log('上传成功');}).catch(error=>{
console.error('上传失败:', error);});}}});</script>
在上述示例中,我们首先定义了一个名称为
previewUrls
的数组,用于保存所有文件的预览链接。当用户选择文件时,我们遍历每个文件,并把它们添加到 FormData 对象中。如果当前文件是一张图片,我们使用
FileReader
对象读取并解析它的 Base64 编码,并把解析结果添加到
previewUrls
数组中。
需要注意的是,在使用 FileReader 对象时,必须在
readAsDataURL
方法之后,通过
onload
回调函数处理读取完成后返回的内容。
最后,当文件列表和预览列表都准备好了,我们可以使用 Vue 的
v-for
指令,在页面上渲染所有的预览链接,并以相应文件的index作为其key值进行区分展示,图片预览相关内容在 v-for 循环内展示出来以实现动态渲染。
设置图片不变形,超出部分隐藏
要设置图片不变形、超出部分隐藏,可以使用 CSS 的
object-fit
和
object-position
属性。
object-fit
属性用于指定当图片尺寸与容器尺寸不同时如何调整图片大小,而
object-position
属性则用于指定图片在容器中显示的位置。
以下是一个示例:
<divid="app"><inputtype="file"@change="handleUpload"ref="fileInput"multiple><divv-for="(url, index) in previewUrls":key="index"class="preview-container"><img:src="url"class="preview-image"></div></div><style>.preview-container{width: 200px;height: 200px;overflow: hidden;}.preview-image{width: 100%;height: 100%;object-fit: cover;object-position: center center;}</style><script>newVue({el:'#app',data(){return{files:[],previewUrls:[]};},methods:{handleUpload(){const formData =newFormData();const files =this.$refs.fileInput.files;for(let i =0; i < files.length; i++){
formData.append('files[]', files[i]);if(/^image\//.test(files[i].type)){const reader =newFileReader();
reader.readAsDataURL(files[i]);
reader.onload=()=>{this.previewUrls.push(reader.result);};}}
axios.post('/upload', formData).then(response=>{
console.log('上传成功');}).catch(error=>{
console.error('上传失败:', error);});}}});</script>
在上述示例中,我们为每个预览容器设置了一个宽度和高度,并通过
overflow: hidden
属性隐藏超出容器范围的部分。而为了让图片填满容器并保持比例不变,我们为图片设置了
width: 100%
和
height: 100%
属性,并使用
object-fit: cover
属性指定将图片等比例缩放以完全覆盖容器。
同时,为了让图片可见区域居中显示,我们还可以使用
object-position: center center
属性来指定其水平和垂直方向上的位置。
上传的同时带上参数,怎么实现?
要在文件上传时同时带上参数,可以使用 FormData 对象的
append()
方法向表单中添加额外的数据。
以下是一个示例:
<divid="app"><inputtype="file"@change="handleUpload"ref="fileInput"multiple></div><script>newVue({el:'#app',methods:{handleUpload(){const formData =newFormData();const files =this.$refs.fileInput.files;// 向 FormData 中添加 param1 和 param2 参数
formData.append('param1','value1');
formData.append('param2','value2');for(let i =0; i < files.length; i++){
formData.append('files[]', files[i]);}
axios.post('/upload', formData).then(response=>{
console.log('上传成功');}).catch(error=>{
console.error('上传失败:', error);});}}});</script>
在上述示例中,我们使用
formData.append()
将
param1
和
param2
参数添加到表单中,并设置它们的值。在上传文件时,我们把包含所有文件和额外参数的 FormData 对象作为 POST 请求的数据,然后将其提交到服务器上。
要在上传文件时设置允许的文件格式,你可以通过在 input 标签中添加
accept
属性来限制用户输入的文件类型。这个属性的值可以是逗号分隔的 MIME 类型或者文件后缀名,多个类型之间用“|”符号隔开。
以下是一个示例:
<divid="app"><inputtype="file"@change="handleUpload"ref="fileInput"multipleaccept=".png,.jpg,.jpeg"></div><script>newVue({el:'#app',methods:{handleUpload(){const formData =newFormData();const files =this.$refs.fileInput.files;for(let i =0; i < files.length; i++){
formData.append('files[]', files[i]);}
axios.post('/upload', formData).then(response=>{
console.log('上传成功');}).catch(error=>{
console.error('上传失败:', error);});}}});</script>
在上述示例中,我们为
<input>
元素添加了
accept
属性,并将其值设为 “.png,.jpg,.jpeg”,以限制用户只能上传这三种类型的图片文件。如果用户选择了不符合规定的文件,则在上传时会出现错误提示。
版权归原作者 qx09 所有, 如有侵权,请联系我们删除。