javascript - 创建一个链接来下载文件

Question

我有一个输入，通过它上传文件，将它们放入数组中并循环显示它们。如何确保通过单击我可以下载我上传并循环显示的文件？ href 中应该包含什么？或者你需要做别的事情吗？ 当我单击链接时，我收到错误文件。

    <a
      href={item.name} // name: "factorio_icon.jpg"
      download
    >{item.name}</a>

...................................................... ...................................................... ...................................................... ......................

import React, {useState} from 'react';

import '../opros-page.scss';
import QuestionNewEntity from 'models/entity/QuestionNewEntity';


export interface TextResponseProps extends React.ComponentProps<'div'> {
  question: QuestionNewEntity;
  answerArray: any;
}

const Attachment: React.FC<TextResponseProps> = ({question, answerArray}) => {
  // console.log(question)

  const [array, setArray]: any = useState([]);
console.log(array)
  return (
    <div className="label-block quiz-block__label-block-type1">
      <span className="label-block__title">{question.title}</span>

      <div className="label-block-files">
        {array.map((item: any, i: number) => {
          return <div
            key={i}
            className="label-block-files__file"
          >
            <svg width="20" height="20" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg">
              <g clip-path="url(#clip0)">
                <path
                  d="M18.3049 2.0953C16.1128 -0.0494691 12.6086 -0.0490026 10.4171 2.09636L1.22597 11.2875C-0.43597 12.9887 -0.404209 15.7149 1.29692 17.3769C2.97005 19.0115 5.64217 19.0115 7.31531 17.3769L15.638 9.05415C16.72 7.97218 16.72 6.21793 15.638 5.13596C14.5561 4.05399 12.8018 4.05399 11.7198 5.13596L3.75896 13.0968C3.48129 13.3843 3.48926 13.8425 3.77677 14.1201C4.05724 14.391 4.50185 14.391 4.78232 14.1201L12.7432 6.15928C13.2711 5.65355 14.109 5.67158 14.6147 6.19948C15.1051 6.71144 15.1051 7.51887 14.6147 8.03083L6.29199 16.3535C5.16766 17.4619 3.35768 17.4489 2.24934 16.3246C1.15219 15.2116 1.15219 13.4238 2.24934 12.3109L11.4405 3.11968C13.0777 1.48191 15.7325 1.48144 17.3702 3.11858C19.008 4.75571 19.0085 7.41057 17.3713 9.04834L8.18016 18.2395C7.87658 18.4995 7.84122 18.9564 8.1012 19.26C8.36119 19.5635 8.81806 19.5989 9.12164 19.3389C9.14996 19.3147 9.17634 19.2883 9.2006 19.26L18.3918 10.0688C20.5696 7.84297 20.5307 4.2731 18.3049 2.0953Z"
                  fill="#1FAF75"/>
              </g>
              <defs>
                <clipPath id="clip0">
                  <rect width="20" height="20" fill="white"/>
                </clipPath>
              </defs>
            </svg>
            <a
              href={item.name}
              download
            >{item.name}</a> <span className="label-block-files__file-size">({item.size}МБ)</span>
            <button
              className="label-block-files__file-btn-delete"
              onClick={() => {
                setArray(array.filter((item: any, k: any) => i !== k));
                answerArray(question, array.filter((item: any, k: any) => i !== k));
              }}
            >
              <svg width="12" height="12" viewBox="0 0 12 12" fill="none" xmlns="http://www.w3.org/2000/svg">
                <path d="M12 1.2L10.8 0L6 4.8L1.2 0L0 1.2L4.8 6L0 10.8L1.2 12L6 7.2L10.8 12L12 10.8L7.2 6L12 1.2Z"
                      fill="#F43649"/>
              </svg>
            </button>
          </div>
        })}
      </div>

      <button className="label-block__btn">
        <input
          type="file"
          onChange={(e: any) => {
            setArray([...array, e.target.files[0]]);
            answerArray(question, [...array, e.target.files[0]])
          }}
          multiple
        />
        <svg width="20" height="20" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg">
          <g clip-path="url(#clip0)">
            <path
              d="M18.3049 2.0953C16.1128 -0.0494691 12.6086 -0.0490026 10.4171 2.09636L1.22597 11.2875C-0.43597 12.9887 -0.404209 15.7149 1.29692 17.3769C2.97005 19.0115 5.64217 19.0115 7.31531 17.3769L15.638 9.05415C16.72 7.97218 16.72 6.21793 15.638 5.13596C14.5561 4.05399 12.8018 4.05399 11.7198 5.13596L3.75896 13.0968C3.48129 13.3843 3.48926 13.8425 3.77677 14.1201C4.05724 14.391 4.50185 14.391 4.78232 14.1201L12.7432 6.15928C13.2711 5.65355 14.109 5.67158 14.6147 6.19948C15.1051 6.71144 15.1051 7.51887 14.6147 8.03083L6.29199 16.3535C5.16766 17.4619 3.35768 17.4489 2.24934 16.3246C1.15219 15.2116 1.15219 13.4238 2.24934 12.3109L11.4405 3.11968C13.0777 1.48191 15.7325 1.48144 17.3702 3.11858C19.008 4.75571 19.0085 7.41057 17.3713 9.04834L8.18016 18.2395C7.87658 18.4995 7.84122 18.9564 8.1012 19.26C8.36119 19.5635 8.81806 19.5989 9.12164 19.3389C9.14996 19.3147 9.17634 19.2883 9.2006 19.26L18.3918 10.0688C20.5696 7.84297 20.5307 4.2731 18.3049 2.0953Z"
              fill="#1FAF75"/>
          </g>
          <defs>
            <clipPath id="clip0">
              <rect width="20" height="20" fill="white"/>
            </clipPath>
          </defs>
        </svg>
        Добавить
      </button>
    </div>
  );
};

export default Attachment;

Answer 1

好的，我找到了这个解决方案

URL.createObjectURL(e.target.files[0])