526互联

laravel:单图片上传(10.27.0/前端vue)

发布时间 2023-10-30 08:50:22作者: 刘宏缔的架构森林

一，相关文档

https://learnku.com/docs/laravel/10.x/filesystem/14865#481e03

二，前端vue代码

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
<template>
  <div>
    <div style="width:800px;margin: auto;display: flex;flex-direction: column;">
      请选择上传图片:
      <input type="file" id="back" ref="backfile" @change="handleFile" /><br/>
      <div id="imglist" style="width:100%;">
        <div v-for="(item,i) in selFiles" :key="i" style="float:left;margin-left: 20px;margin-top: 20px;height:150px;position:relative;">
          <img :src="item.fileimg"  style="height:150px;"/>
        </div>
      </div>
      <div>
        <input type="button" value="上传" @click="upload" />
      </div>
    </div>
  </div>
</template>
<script>
import {ref} from "vue";
import axios from 'axios';
export default {
  name: "ImgUpload",
  setup() {
    //选中的图片文件，保存在数组中
    const selFiles = ref([]);
    //选中图片后的处理
    const handleFile = () => {
      let filePaths = window.event.target.files;
      //清空原有缩略图
      if (filePaths.length === 0) {
        //未选择，则返回
        return
      } else {
        //清空数组中原有图片
        selFiles.value.length = 0;
      }
      //把新选中的图片加入数组
      for( var i=0;i<filePaths.length; i++ ){
        let file = filePaths[i];
        let one = {
          fileimg:URL.createObjectURL(file),  //预览用
          file:file,
        }
        selFiles.value.push(one);
      }
    }
 
    //上传
    const upload = () => {
      //判断是否选中文件
      if (selFiles.value.length == 0) {
        alert("请在上传前先选中文件!");
        return;
      }
      var file = selFiles.value[0].file;
      if (typeof(file) === "undefined") {
        alert("请在上传前先选中文件!");
        return;
      }
      // 创建一个表单数据
      var data = new FormData();
      //遍历文件并上传
      for( var i=0;i<selFiles.value.length; i++ ){
        let fileOne = selFiles.value[i].file;
        data.append("img",fileOne);
      }
      data.append("userName","laoliu");
      let url = "/api/news/imgadd";
      //axios上传文件
      axios({
        method:"post",
        url:url,
        data:data,
        headers:{'Content-Type': 'multipart/form-data'},
      }).then((res) => {
            if (res.data.code == 0) {
              let data = res.data.data;
              console.log(data);
              let imageUrl = data.url;
              alert("success:image:"+imageUrl);
            } else {
              alert("error:"+res.data.msg);
            }
          }
      ).catch(err=>{
        alert('网络错误:'+err.message);
      });
    }
    return {
      selFiles,
      handleFile,
      upload,
    }
  }
}
</script>
<style scoped>
</style>

三，后端php代码

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
public function imgadd(Request $request) {
    // 判断文件是否上传
    // 实例
    if ($request->hasFile('img')) {
        // 获取后缀名
        $ext=$request->file('img')->getClientOriginalExtension();
        // 新的文件名
        $newFile=time().rand().".".$ext;
        //保存到目录
        $baseDir = "/var/www/html/digImage";
        // 上传文件操作
        $request->file('img')->move($baseDir,$newFile);
        //得到图片的url
        $url = "http://192.168.219.6/digImage/".$newFile;
        //返回
        return Result::Success(['url'=>$url]);
    }else{
        // 回到上一个页面
        //return back();
        return Result::ErrorCode(10024,'图片文件未上传');
    }
}

说明：刘宏缔的架构森林—专注it技术的博客，
网站：https://blog.imgtouch.com
原文: https://blog.imgtouch.com/index.php/2023/10/29/laravel-dan-tu-pian-shang-chuan-qian-duan-vue/
代码: https://github.com/liuhongdi/ 或 https://gitee.com/liuhongdi
说明：作者:刘宏缔 邮箱: 371125307@qq.com

四，测试效果:

五,查看laravel框架的版本:

liuhongdi@lhdpc:/data/laravel/dignews$ php artisan --version
Laravel Framework 10.27.0