文件上传(ruoyi若依框架)

<a class="input-file input-fileup" href="javascript:;">
    + 选择文件<input size="100" type="file" @change="uploadFile">
</a>

  

function uploadFile(event) {
    const file = event.target.files[0];
    const formData = new FormData();
    formData.append('dishfile', file);
    axios.post('http://192.168.2.50:14758/system/dish/dishfile', formData, {
      headers: {
        'Content-Type': 'multipart/form-data'
      }
    })
      .then(response => {
        console.log(response);
        let img_name = response.data.imgUrl.split("/dish/")[1];
        let imgurl = 'http://192.168.2.50:14758' + response.data.imgUrl
        file_List.value.push({ name: img_name, url: imgurl, i_url: response.data.imgUrl })
        console.log('file_List', file_List.value);
      })
      .catch(error => {
        // 处理上传失败的错误
      });
}

  

.input-file {
  display: inline-block;
  position: relative;
  overflow: hidden;
  text-align: center;
  width: auto;
  background-color: #1890ff;
  border: solid 1px #ddd;
  border-radius: 4px;
  padding: 5px 10px;
  font-size: 12px;
  font-weight: normal;
  line-height: 18px;
  color: #fff;
  text-decoration: none;
}

.input-file input[type="file"] {
  position: absolute;
  top: 0;
  right: 0;
  font-size: 14px;
  background-color: #fff;
  transform: translate(-300px, 0px) scale(4);
  height: 40px;
  opacity: 0;
  filter: alpha(opacity=0);
}

若依框架文件上传函数,其他不变

function uploadFile(event) {

    const file = event.target.files[0];
    const formData = new FormData();
    formData.append('dishfile', file);
    let token = getCookie('Admin-Token');
    axios.post('http://192.168.2.50:14758/system/dish/dishfile', formData, {
      headers: {
        'Content-Type': 'multipart/form-data',
        'Authorization': 'Bearer ' + token
      }
    })
      .then(response => {
        console.log(response);
        let img_name = response.data.imgUrl.split("/dish/")[1];
        let imgurl = 'http://192.168.2.50:14758' + response.data.imgUrl
        file_List.value.push({ name: img_name, url: imgurl, i_url: response.data.imgUrl })
        console.log('file_List', file_List.value);
      })
      .catch(error => {
        // 处理上传失败的错误
      });
  
}

//获取token
function getCookie(name) {
  let cookieArr = document.cookie.split(";");
  for (let i = 0; i < cookieArr.length; i++) {
    let cookiePair = cookieArr[i].split("=");
    if (name == cookiePair[0].trim()) {
      return decodeURIComponent(cookiePair[1]);
    }
  }
  return null;
}

  

posted @ 2025-01-06 15:50  冥·紫月  阅读(272)  评论(0编辑  收藏  举报