php+vue上传预览图片

最新推荐文章于 2025-05-19 10:57:36 发布

原创最新推荐文章于 2025-05-19 10:57:36 发布 · 1.1k 阅读

1 ·

CC 4.0 BY-SA版权

php 专栏收录该内容

4 篇文章

订阅专栏

本文详细介绍了一种前端实现图片预览与上传的方法，并通过PHP完成服务器端的图片存储过程。前端部分使用JavaScript读取文件并转换为Data URL进行预览，而后通过FormData将图片与标识符一并发送至服务器。服务器端利用PHP接收上传的文件，将其移动到指定目录下，最终反馈上传结果。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

预览图片

change(e){
               let _this = this
       var files = e.target.files[0]
       let reader = new FileReader()
       reader.readAsDataURL(files)
       reader.onloadend = function () {
       _this.picture = this.result //图片地址
       }

}

上传图片

           saveImg(){
               var data = new FormData();
               data.append("myfile",this.$refs.files.files[0]);
               data.append("id",this.$store.state.id);
               this.$axios.post("http://127.0.0.1/personality/insert-img.php",data,{
                   headers:{'Content-Type':'multipart/form-data'}
               })
               .then((response)=>{
                   console.log(response.data)
               })
           }

php代码

<?php
require "conn.php";
$imgname = $_FILES['myfile']['name'];
$tmp = $_FILES['myfile']['tmp_name'];
$tid = $_POST['id'];
$filepath = 'images/';
if(move_uploaded_file($tmp,$filepath.$tid."-user.jpg")){
echo "上传成功";
}else{
echo "上传失败";
}